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的使用,希望对初学者有所帮助。
相关文章:
Compose Canvas基础(2) 图形转换
Compose Canvas基础(2)图形转换 前言平移 translate缩放 scale旋转 rotate自定义绘图区域及绘制内边距inset组合转换 withTransform完整代码总结 上一篇文章 Compose Canvas基础(1) drawxxx方法 前言 阅读本文需要一定compose基…...
【计算机网络笔记】分组交换中的报文交付时间计算例题
系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 系列文章目录题目解答 题目 在下图所示的采用“存储-转发”方式的分组交换网络中所有链路的数据传输速率为100 Mbps,分…...
JVS-rules规则引擎,解决大数据风控的自动化决策利器
规则引擎中的评分卡节点是一种用于评估客户信用、风险等级或其他指标的重要工具。它通常用于金融、信贷等领域,以便根据一系列预定义的规则和权重来对客户进行评分。以下是评分卡节点的主要功能、作用以及配置方式的介绍: 功能和作用: 评估…...
dvaJs在react 项目中的简单使用
官网:入门课 | DvaJS 备注:个人学习 代码示例: getColumns.js const getColumns [{title: 姓名, // 列标题dataIndex: name, // 数据字段名称,与数据中的字段名对应key: name, // 列的唯一键},{title: 年龄, // 列标题dataIn…...
如何将las数据转换为osgb数据?
答:如果是需要用点云建模可使用重建大师。如果只是想转换格式可以使用网格大师的点云转osgb工具。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件,输入倾斜照片,激光点云,POS信息及像控点,输出…...
创新与重塑,佛塑科技打造集团型 CRM 建设标杆
“十四五”时期是我国全面建成小康社会、实现第一个百年奋斗目标之后,乘势而上开启全面建设社会主义现代化国家新征程、向第二个百年奋斗目标进军的第一个五年。 在政府有序推进“十四五”规划的进程中,佛山佛塑科技集团股份有限公司(证券简…...
STM32CUBEMX_DMA串口空闲中断接收+接收发送缓冲区
STM32CUBEMX_DMA串口空闲中断接收接收发送缓冲区 前言: 我了解的串口接收指令的方式有:在这里插入图片描述 1、接收数据中断特定帧尾 2、接收数据中断空闲中断 3、DMA接收空闲中断 我最推荐第三种,尤其是数据量比较大且频繁的时候 串口配置 …...
酸蚀刻对钛医药材料纳米形态表面特性及活化能的影响
引言 由于商业纯钛(CP Ti)具有抗腐蚀性,并且具有合适的机械性能以及生物相容性,因此,目前一直被用作牙科植入材料。为了在临床手术中获得高水平的成功,CP Ti的表面质量和形貌是影响植入手术结果的比较关键的因素之一,…...
iOS代码混淆工具推荐:IPA Guard详细介绍
iOS代码混淆工具推荐:IPA Guard详细介绍 目录 摘要: 引言 正文 1. IPA Guard概述 2. IPA Guard的功能特性 3. IPA Guard的混淆模式 4. 支持的语言 5. 使用场景 总结 参考资料 总结 参考资料 摘要: 了解并选择合适的iOS代码混淆工…...
Vue检测数据的原理
Vue能够对用户的数据进行响应式,也就是你在data中写了什么,你在模板中用到data的部分就会渲染成什么,那么Vue是怎么知道用户修改了data中的数据变化并对模板重新进行解析的呢? 在Vue将数据存储为自身的_data之前,Vue会…...
队列的运行算法
1.链队: 插入 删除 打印 取队顶 #include <stdio.h> #include <stdlib.h>typedef struct Qnode{int data;struct Qnode *next; }Qnode,*QuenePtr;typedef struct {QuenePtr front;QuenePtr rear; }LinkQueue; //初始化 void InitQueue(LinkQueue *q){(…...
KVM/qemu安装UOS 直接让输入用户密码
错误信息 安装后出现: 1、点击刚刚建立的虚拟机最上角感叹号(设备管理器) ----新建硬件---输入----类型:【通用 USB Mouse】。 ----新建硬件---输入----类型:【通用 USB keyboard】。 2、在设备管理器中----新建硬…...
画一条0.5px的线、设置小于12px的字体、解决 1px 问题
1、如何画一条0.5px的线 ① 采用 transform: scale() 的方式 该方法用来定义元素的 2D 缩放转换; .line {width: 100px;height: 40px;transform: scale(1,0.5);background-color: red;} ② 采用 meta viewport 的方式 这样就能缩放到原来的 0.5 倍,如…...
Unity中Shader的深度写入ZWrite
文章目录 前言一、更新深度缓冲区中值二、深度值的写入操作只有两个选择 开启 和 关闭ZWrite OnZWrite Off 三、深度写入在半透明物体物体中开启的情况1、特效一般都需要关闭深度写入2、如果在人物模型上使用 特效半透明 的 Shader,为了不出现模型自身穿透问题&…...
Jetson nano 系列之7—jetson 通过rtp将视频发给远程host
Jetson nano 系列之7—jetson 通过rtp将视频发给远程host 1.笔记本端配置1.1 安装VLC软件1.2 配置端口号1.3 创建SDP 文件2.执行命名,查看效果2.1 jetson端2.2 笔记本端参考文献本博客介绍了将jetson nano csi摄像头的视频通过rtp发给其他主机(这里是一台windows笔记本)。 …...
有哪些值得推荐的优秀 HTMLCSS 网站前端设计的网络资源(博客、论坛)?
前言 推荐几个有意思的CSS学习的网站和github上的学习类型的项目~ 网站推荐 1、CODEPEN 代码与所展示的页面相互对应,你可以在上面找到其他人已经写好的demo,参考 代码效果 网址:https://codepen.io 2、Coding Fantasy 通过游戏的形式来提…...
RTSP/Onvif安防视频平台EasyNVR级联至EasyNVS系统不显示通道,是什么原因?
视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入,并能对接入的视频流进行处理与多端分发,包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。 我们在此前的文章中也介绍过关于EasyNVR级联EasyNVS上云网关综合管理平台的内容ÿ…...
点云处理【三】(点云降采样)
点云降采样 第一章 点云数据采集 第二章 点云滤波 第二章 点云降采样 1. 为什么要降采样? 我们获得的数据量大,特别是几十万个以上的点云,里面有很多冗余数据,会导致处理起来比较耗时。 降采样是一种有效的减少数据、缩减计算量…...
GB/T 41510-2022 起重机械安全评估规范 通用要求 摘要
在线预览|GB/T 41510-2022http://c.gb688.cn/bzgk/gb/showGb?typeonline&hcno696806EC48F4105CEF7479EB32C80C9E 知识点: 安全等级定义,设计寿命,剩余寿命,使用寿命。 标准附录有应力的具体解算演示。...
【vr】【unity】白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置
【视频教学】 【白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置】 https://www.bilibili.com/video/BV19D4y1N73i/?share_source=copy_web&vd_source=7f5c96f5a58b7542fc6b467a9824b04e 【内容】 上一节引入了XR Origin并进行了初步设置,运行测试时V…...
UE5发布Android屏幕适配实践(Blueprint)
之前发了一个文章UE5屏幕适配,后续做项目中又遇到问题,对DPI Scale又有了理解,所以又写了这篇文章。https://mp.csdn.net/mp_blog/creation/editor/133337134https://mp.csdn.net/mp_blog/creation/editor/133337134 DPI Scale Rule使用Short…...
Spanner: Google’s Globally Distributed Database
1. INTRODUCTION Spanner可以扩展到跨数百个数据中心的数百万台机器与数万亿个数据库行。 Spanner是一个可伸缩、全球化分布的数据库,其由Google设计、构建、并部署。在抽象的最高层,Spanner是一个将数据分片(shard)到分布在全世…...
Java基础——了解进制和位运算
文章目录 关于进制位运算左位移右位移无符号右移取反按位与按位或按位异或 关于进制 所有数字在计算机底层都是以二进制的形式存在。 进制的四种表达形式: 二进制:[0,1],满2进1,以0b或0B开头。八进制:[0-7]…...
mybatisplus 自定义mapper加多表联查结合分页插件查询时出现缺失数据的问题
问题描述 最近做项目时使用了mybatisplus,分页插件也使用的是mybatisplus自带的分页插件,业务需求是查询客户列表,每个客户列表中有一个子列表,在通过分页插件查询后,会出现数量总数为子列表总数、客户列表与子列表不…...
陪诊系统|陪诊软件革新陪诊体验解决病患难题
随着医疗服务的不断升级和改善,陪诊系统作为现代医院的一项重要创新,为病患和陪护人员提供了更加便捷、高效的服务体验。本文将全面介绍陪诊系统的功能、特点和优势,让您更好地了解和体验这一创新科技。 一、系统功能 陪诊系统旨在为病患和陪…...
[Tkinter 教程08] Canvas 图形绘制
python - [译][Tkinter 教程08] Canvas 图形绘制 - 个人文章 - SegmentFault 思否 一、简介 Canvas 为 Tkinter 提供了绘图功能. 其提供的图形组件包括 线形, 圆形, 图片, 甚至其他控件. Canvas 控件为绘制图形图表, 编辑图形, 自定义控件提供了可能. 在第一个例子里, …...
ES6 Symbol 数据结构
1. Symbol概念以及引入原因 ES6 引入了的一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、…...
Redis常用数据类型、Redis常用命令
Redis常用数据类型、Redis常用命令: Redis常用数据类型:1. 字符串String 类型2. 哈希hash 类型3. 列表list 类型4. 集合set 类型5. 有序集合sorted set / zset 类型 Redis常用命令:1. 字符串操作命令2. 哈希操作命令3. 列表操作命令4. 集合操…...
ERP系统是如何运作的?erp管理系统操作流程
ERP系统是如何运作的?ERP系统的运作流程是怎样的? 以简道云ERP管理系统为例: 各行各业适配的ERP系统>>>>https://www.jiandaoyun.com 可以看到上面那个流程图,一般来说,我们把ERP系统可以分为4个大的模…...
springBoot复杂对象表示和lombok的使用
springBoot复杂对象表示 前言简单案例lombok的使用通过properties文件进行绑定在yaml文件中使用 前言 对象:键值对的集合,如:映射(map)/哈希(hash)/字典(dictionary) 数组:一组按次…...
网站上传图片要求/web网页模板
目录前言Day2.OpenCV核心基础像素访问与修改图像属性访问ROI提取通道操作边界填充图像的算术操作与位操作图像加法图像减法图像乘法图像除法位操作运行计时结语前言 按照OpenCV官方doc顺序来进行学习回忆和总结 本次的内容是opencv中的常用核心操作(core.hpp),包括…...
手机模板网站/网站推广如何做
计算机软件著作权登记分类号如何选择? 回答:在向中国版权保护中心(http://www.ccopyright.com.cn/ )申请计算机软件著作权的时候,需要填写一表单【分类号】,这个分类号,很多人不知道如何选择。…...
做网站的好处在哪里/企业网搭建
发送页: 1.定义静态变量: public static string str""; 2. strthis.TextBox1.Text; Server.Transfer("webform2.aspx"); 接收页: 1.引入第一页的命名空间:using WebApplication1; 2 this…...
冷库网站建设/台州网站建设平台
系统准备部分可参见上一篇文章:1.安装websphere[rootxbfye7l02 WAS]# pwd/apps/soft/WAS/WAS修改静默文件:responsefile.e7.txt只列出改动项,其余默认。-OPTsilentInstallLicenseAcceptance"true"-OPTif_cip_modifyexis…...
北京网站建设服务公司/黑龙江最新疫情通报
javascript js字母大小写转换方法 1、转换成大写:toUpperCase() 2、转换成小写:toLowerCase() 3、举例: (1)var a"aBcD";aa.toUpperCase();alert(a);提示出来的就是 ABCD (2)var …...
企业新品做众筹的美国网站/网络营销的职能有哪些
1. XML概述 关于XML的定义有以下几种说法: ① XML是可扩展标记语言(Extensible Markup Language)的缩写。 ② XML是一种类似于HTML的标记语言。 ③ XML是描述数据的,重点描述“数据是什么”。 ④ XML的标记不是在XML中预定义的&a…...