Compose Canvas基础(2) 图形转换

Compose Canvas基础(2)图形转换

  • 前言
  • 平移 translate
  • 缩放 scale
  • 旋转 rotate
  • 自定义绘图区域及绘制内边距inset
  • 组合转换 withTransform
  • 完整代码
  • 总结

上一篇文章 Compose Canvas基础(1) drawxxx方法

前言

阅读本文需要一定compose基础,如果没有请移步Jetpack Compose入门详解(实时更新)

本文介绍Compose Canvas基础,介绍Canvas可组合项绘制的图形的转换相关api。


平移 translate

下例的代码都在Canvas可组合项的drawscope中

代码示例如下:

            drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)translate(left = 100f,top = 100f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}

效果如下:
在这里插入图片描述
需要讲解的是translate()方法,它有三个参数

  • left-在x轴上平移坐标空间的像素
  • top-在y轴上平移坐标空间的像素
  • block-lambda,用于将图形包裹起来的lambda

上例代码表示将图形向右移动100像素,向下移动100像素.


缩放 scale

代码示例如下:

 		translate(left = 100f,top = 100f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}scale(scaleX = 2f,scaleY = 1f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}

效果如下:
在这里插入图片描述
需要讲解的是scale()方法,它有四个参数

  • scaleX-要在X中缩放的量
  • scaleY-要在Y中缩放的量
  • pivot-轴心点的坐标,默认为坐标空间的中心
  • block-lambda,用于将图形包裹起来的lambda

上例代码表示将图形以中心为轴心以x缩放2倍,y不变.


旋转 rotate

代码示例如下:

 		drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)rotate(degrees = 45f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}

效果如下:
在这里插入图片描述
需要讲解的是rotate()方法,它有四个参数

  • degrees-顺时针旋转
  • pivot-轴心点的坐标,默认为坐标空间的中心
  • block-lambda,用于将图形包裹起来的lambda

上例代码表示将图形以中心为轴心顺时针旋转45度.


自定义绘图区域及绘制内边距inset

代码示例如下:

 drawArc(color = Color(0xFFF44336),size = size,startAngle = 0f,sweepAngle = 90f,useCenter = true)val cqs = size/2finset(horizontal = 50f, vertical = 30f){drawArc(color = Color(0xFFF44336),size = cqs,startAngle = 0f,sweepAngle = 90f,useCenter = true)}

效果如下:
在这里插入图片描述
需要讲解的是inset()方法,它有四个参数

  • horizontal-插入左右边界的像素数。默认为零
  • vertical-插入上边界和下边界的可选像素数。默认为零
  • block-lambda,用于将图形包裹起来的lambda

上例代码表示将图形以canvas的宽高度的一半为区域作图,并且horizontalpadding 50像素 verticapadding 30像素.


组合转换 withTransform

代码示例如下:

            drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)withTransform({translate(left= 600f)scale(scaleX = 2f,scaleY = 1f)}){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}

效果如下:
在这里插入图片描述

需要讲解的是withTransform()方法,它有四个参数

  • transformBlock-调用回调以在发布绘图操作之前发布要进行的转换
  • block-lambda,用于将图形包裹起来的lambda

上例代码表示将图形先以平移600像素,再缩放2倍.

完整代码


import androidx.compose.foundation.Canvas
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PointMode
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.drawscope.scale
import androidx.compose.ui.graphics.drawscope.translate
import androidx.compose.ui.graphics.drawscope.withTransform
import androidx.compose.ui.text.drawText
import androidx.compose.ui.tooling.preview.Preview/*** @author zengyifeng* @date createDate:2023-10-03* @brief description*/
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun CanvasView() {Canvas(modifier = Modifier, onDraw = {drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)withTransform({translate(left= 600f)scale(scaleX = 2f,scaleY = 1f)}){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}val cqs = size/2finset(horizontal = 50f, vertical = 30f){drawArc(color = Color(0xFFF44336),size = cqs,startAngle = 0f,sweepAngle = 90f,useCenter = true)}translate(left = 100f,top = 100f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}scale(scaleX = 2f,scaleY = 1f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}rotate(degrees = 45f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}})
}

总结

本文介绍了Compose Canvas基础中图形转换相关的API,包括平移、缩放、旋转、自定义绘图区域及内边距、组合转换等内容。通过示例代码,演示了这些API的使用,希望对初学者有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160713.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql——面试题初体验

查询环境 1、student(学生表) 2、课程表(course) 3、教师表(teacher) 4、成绩表(score) 问题 (1) 查询所有学生的学号、姓名、选课数、总成绩 mysql> select s.s_id as 学号,s.s_name as 姓名 from student as s; ---------------- | 学号 | 姓名…

E138: Can‘t write viminfo file

E138: Can’t write viminfo file /home/xxx/.viminfo! 原因 进入/home/xxx/目录下,用ls -a你会发现有很多.viminfa.tmp - .viminfz.tmp 这种的临时文件,这是因为使用vim编辑器时,如果编辑器没有正常退出就会生成一个暂存文件,…

Flow深入浅出系列之更聪明的分享 Kotlin Flows

Flow深入浅出系列之在ViewModels中使用Kotlin FlowsFlow深入浅出系列之更聪明的分享 Kotlin FlowsFlow深入浅出系列之使用Kotlin Flow自动刷新Android数据的策略 Flow深入浅出系列之更聪明的分享 Kotlin Flows 使生命周期对上游流有效,以跳过不必要的工作。这是一…

使用kaliber与imu_utils进行IMU、相机+IMU联合标定

目录 1 标定工具编译 1.1 IMU标定工具 imu_utils 1.2 相机标定工具 kaliber 2 标定数据录制 3 开始标定 3.1 IMU标定 3.2 相机标定 3.3 相机IMU联合标定 4 将参数填入ORBSLAM的文件中 1 标定工具编译 1.1 IMU标定工具 imu_utils 标定IMU我们使用imu_utils软件进行标定…

Variations-of-SFANet-for-Crowd-Counting记录

论文:Encoder-Decoder Based Convolutional Neural Networks with Multi-Scale-Aware Modules for Crowd Counting 论文链接:https://arxiv.org/abs/2003.05586 源码链接:GitHub - Pongpisit-Thanasutives/Variations-of-SFANet-for-Crowd-C…

yarn : 无法加载文件 C:\Program Files\nodejs\yarn.ps1

问题描述: 问题分析: 这个错误提示说明在电脑系统上禁止运行 PowerShell 脚本,因此导致无法加载 Yarn 的安装脚本。这是由于系统的执行策略(Execution Policies)设置所导致的。 解决方法: 1. 以管理员身…

Ubuntu中不能使用ifconfig命令

​ 问题 打开终端使用如下命令不能运行: ifconfig显示如下错误: 解决方法 在VMware中的虚拟机下面打开“编辑虚拟机设置”,或者在已经打开的虚拟机面板上面打开“虚拟机—设置” 选择网络适配器,选择“NAT模式”,没开机的就…

Learning Sample Relationship for Exposure Correction 论文阅读笔记

这是中科大发表在CVPR2023的一篇论文,提出了一个module和一个损失项,能够提高现有exposure correction网络的性能。这已经是最近第三次看到这种论文了,前两篇分别是CVPR2022的ENC(和这篇文章是同一个一作作者)和CVPR20…

ardupilot开发 --- 起飞前后 篇

起飞前检查 电机响应是否正确(转向)姿态响应是否正常(roll pitch yaw)GPS数据是否正常(星数,RTK信号)电源电压安全开关安全检测(armed pre check) 起飞前的必调参数 机…

mmlab 做实验

首先 下载项目完整代码,在pycharm中打开 1. comfig 中有各种网络模型,可以直接使用训练好的预训练模型,尽量不要改动网络模型的结构 2. 18表示网络机构18层,8是每个卡的batch,cifar10 是数据集 3.配置文件解析 4. …

工业机器视觉系统构成及功能

工业机器视觉系统构成及功能 工业机器视觉系统由光源、光学传感器、图像采集设备、图像处理设备、机器视觉软件、辅助传感器、控制单元和执行机构等组件构成。 光源提供光线以辅助图像获取。 光学传感器将外部场景转换为电信号。 图像采集设备将信号转换为图像数据&#xf…

VSCode连接代理

VSCode连接代理 首先有代理 然后在设置里搜代理 然后再在windows的设置–>网络–>代理 拼接上就行 最后重启

【小尘送书-第八期】《小团队管理:如何轻松带出1+1>2的团队》

大家好,我是小尘,欢迎你的关注!大家可以一起交流学习!欢迎大家在CSDN后台私信我!一起讨论学习,讨论如何找到满意的工作! 👨‍💻博主主页:小尘要自信 &#x1…

macos 12 支持机型 macOS Monterey 更新中新增的功能

macOS Monterey 能让你以全然一新的方式与他人沟通联络、共享内容和挥洒创意。尽享 FaceTime 通话新增的音频和视频增强功能,包括空间音频和人像模式。通过功能强大的效率类工具(例如专注模式、快速备忘录和 Safari 浏览器中的标签页组)完成更…

【unity】【VR】白马VR课堂系列-VR开发核心基础04-主体设置-XR Rig的引入和设置

接下来我们开始引入并构建XR Rig。 你可以将XR Rig理解为玩家在VR世界中的替身。 我们先删除Main Camera,在Hierarchy右键点击删除。 然后再在场景层右键选择XR下的XR Origin。这时一个XR Origin对象就被添加到了Hierarchy。 重设XR Origin的Position和Rotation…

数据结构 - 4(栈和队列6000字详解)

一:栈 1.1 栈的概念 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原…

JVM三色标记

三色标记 什么是三色标记法 三色标记法,也被称为Tri-color Marking Algorithm,是一种用于追踪对象存活状态的垃圾回收算法。它基于William D. Hana和Mark S. McCulleghan在1976年提出的两色标记法的基础上进行了改进。 与两色标记法只能将对象标记为“…

[GSEP202306 一级] C++ 时间规划

题目描述 小明在为自己规划学习时间。现在他想知道两个时刻之间有多少分钟,你通过编程帮他做到吗? 输入格式 输入4行,第一行为开始时刻的小时,第二行为开始时刻的分钟,第三行为结束时刻的小时,第四行为结束时刻的分…

笔记本Win10系统一键重装操作方法

笔记本电脑已经成为大家日常生活和工作中必不可少的工具之一,如果笔记本电脑系统出现问题了,那么就会影响到大家的正常操作。这时候就可以考虑给笔记本电脑重装系统了。接下来小编给大家介绍关于一键重装Win10笔记本电脑系统的详细步骤方法。 推荐下载 系…

【Linux学习笔记】代码编译工具gcc/g++

1. 程序的翻译1.1. 预处理1.2. 编译1.3. 汇编1.4. 链接 2. 动态链接和静态链接2.1. 动态链接2.2. 静态链接2.3. 动态链接和静态链接的区别2.4. 动态链接和静态链接的验证 3. make/makefile3.1. 依赖方法和依赖关系3.2. 写一个makefile文件3.3. PHONY的意义3.4. makefile的推导规…