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…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...

Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...

Chrome 浏览器前端与客户端双向通信实战
Chrome 前端(即页面 JS / Web UI)与客户端(C 后端)的交互机制,是 Chromium 架构中非常核心的一环。下面我将按常见场景,从通道、流程、技术栈几个角度做一套完整的分析,特别适合你这种在分析和改…...

Python环境安装与虚拟环境配置详解
本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南,适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者,都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...
第22节 Node.js JXcore 打包
Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...