鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：Path2D）

路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口或者fill接口进行绘制。

说明：

从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

addPath

addPath(path: path2D, transform?:Matrix2D): void

将另一个路径添加到当前的路径对象中。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
pathpath2D是-需要添加到当前路径的路径对象，路径单位：px。
transformMatrix2D否null新增路径的变换矩阵对象。

示例：

// xxx.ets
@Entry
@Component
struct AddPath {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.addPath(this.path2Da)this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238712467

closePath

closePath(): void

将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。

从API version 9开始，该接口支持在ArkTS卡片中使用。

示例：

// xxx.ets
@Entry
@Component
struct ClosePath {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.moveTo(200, 100)this.path2Db.lineTo(300, 100)this.path2Db.lineTo(200, 200)this.path2Db.closePath()this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001193872542

moveTo

moveTo(x: number, y: number): void

将路径的当前坐标点移动到目标点，移动过程中不绘制线条。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
xnumber是0目标点X轴坐标，单位：vp。
ynumber是0目标点Y轴坐标，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct MoveTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.moveTo(50, 100)this.path2Db.lineTo(250, 100)this.path2Db.lineTo(150, 200)this.path2Db.closePath()this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001194032502

lineTo

lineTo(x: number, y: number): void

从当前点绘制一条直线到目标点。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
xnumber是0目标点X轴坐标，单位：vp。
ynumber是0目标点Y轴坐标，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct LineTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.moveTo(100, 100)this.path2Db.lineTo(100, 200)this.path2Db.lineTo(200, 200)this.path2Db.lineTo(200, 100)this.path2Db.closePath()this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238832437

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

创建三次贝赛尔曲线的路径。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
cp1xnumber是0第一个贝塞尔参数的x坐标值，单位：vp。
cp1ynumber是0第一个贝塞尔参数的y坐标值，单位：vp。
cp2xnumber是0第二个贝塞尔参数的x坐标值，单位：vp。
cp2ynumber是0第二个贝塞尔参数的y坐标值，单位：vp。
xnumber是0路径结束时的x坐标值，单位：vp。
ynumber是0路径结束时的y坐标值，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct BezierCurveTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.moveTo(10, 10)this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20)this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001239032455

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void

创建二次贝赛尔曲线的路径。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
cpxnumber是0贝塞尔参数的x坐标值，单位：vp。
cpynumber是0贝塞尔参数的y坐标值，单位：vp。
xnumber是0路径结束时的x坐标值，单位：vp。
ynumber是0路径结束时的y坐标值，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.moveTo(10, 10)this.path2Db.quadraticCurveTo(100, 100, 200, 20)this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238952419

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

绘制弧线路径。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
xnumber是0弧线圆心的x坐标值，单位：vp。
ynumber是0弧线圆心的y坐标值，单位：vp。
radiusnumber是0弧线的圆半径，单位：vp。
startAnglenumber是0弧线的起始弧度。
endAnglenumber是0弧线的终止弧度。
counterclockwiseboolean否false是否逆时针绘制圆弧。

示例：

// xxx.ets
@Entry
@Component
struct Arc {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.arc(100, 75, 50, 0, 6.28)this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001194192488

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

依据圆弧经过的点和圆弧半径创建圆弧路径。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
x1number是0圆弧经过的第一个点的x坐标值，单位：vp。
y1number是0圆弧经过的第一个点的y坐标值，单位：vp。
x2number是0圆弧经过的第二个点的x坐标值，单位：vp。
y2number是0圆弧经过的第二个点的y坐标值，单位：vp。
radiusnumber是0圆弧的圆半径值，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct ArcTo {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.arcTo(150, 20, 150, 70, 50)this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001194352486

ellipse

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

在规定的矩形区域绘制一个椭圆。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
xnumber是0椭圆圆心的x轴坐标，单位：vp。
ynumber是0椭圆圆心的y轴坐标，单位：vp。
radiusXnumber是0椭圆x轴的半径长度，单位：vp。
radiusYnumber是0椭圆y轴的半径长度，单位：vp。
rotationnumber是0椭圆的旋转角度，单位为弧度。
startAnglenumber是0椭圆绘制的起始点角度，以弧度表示。
endAnglenumber是0椭圆绘制的结束点角度，以弧度表示。
counterclockwiseboolean否false是否以逆时针方向绘制椭圆。
true:逆时针方向绘制椭圆。
false:顺时针方向绘制椭圆。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI*2)this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001238712471

rect

rect(x: number, y: number, w: number, h: number): void

创建矩形路径。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数类型必填默认值描述
xnumber是0指定矩形的左上角x坐标值，单位：vp。
ynumber是0指定矩形的左上角y坐标值，单位：vp。
wnumber是0指定矩形的宽度，单位：vp。
hnumber是0指定矩形的高度，单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {private settings: RenderingContextSettings = new RenderingContextSettings(true)private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)private path2Db: Path2D = new Path2D()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Canvas(this.context).width('100%').height('100%').backgroundColor('#ffff00').onReady(() =>{this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)})}.width('100%').height('100%')}
}

zh-cn_image_0000001193872544

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

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

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

相关文章

【ARM】DS中Coretex-M处理器的常用寄存器介绍

【ARM】DS中Coretex-M处理器的常用寄存器介绍

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 了解ArmDS中Coretex-M处理器的常用寄存器的名称及作用。 2、 问题场景 在对Coretex-M处理器进行开发时，了解常用寄存器的名称及作用，可以： 编写正确的程序: 寄存器是程序员用…
阅读更多...
cs推免相关文书模板、基本资料

cs推免相关文书模板、基本资料

目录 复试问题 文书模板 机考指南 链接：https://pan.baidu.com/s/1WAAzTPZsASNDt5XRmAO9VA?pwd=21yk 提取码：21yk --来自百度网盘超级会员V5的分享 408专业课复习 链接：https://pan.baidu.com/s/1UI0EwWTy3zn3lm3wTQJ2Dw?pwd=t5gj 提取码：t5gj --来自百度网盘超级会…
阅读更多...
【代码】YOLOv8标注信息验证

【代码】YOLOv8标注信息验证

此代码的功能是标注信息验证，将原图和YOLOv8标注文件（txt）放在同一个文件夹中，作为输入文件夹 程序将标注的信息还原到原图中，并将原图和标注后的图像一同保存，以便查看 两个draw_labels函数，分…
阅读更多...
HarmonyOS 通知意图

HarmonyOS 通知意图

之前的文章 我们讲了 harmonyos 中的 基础和进度条通知 那么 今天 我们来说说 任何给通知添加意图 通知意图 简单说 就是 当我们点击某个通知 如下图 然后 就会拉起某个 应用 就例如说 我们某个微信好友发消息给我们 我们 点击系统通知 可以直接跳到你们的聊天界面 好 回到…
阅读更多...
哥斯拉流量webshell分析--＞ASP/PHP

哥斯拉流量webshell分析--＞ASP/PHP

哥斯拉流量webshell分析 哥斯拉是继菜刀、蚁剑、冰蝎之后的又一个webshell利器，这里就不过多介绍了。 哥斯拉GitHub地址：https://github.com/BeichenDream/Godzilla 很多一线师傅不太了解其中的加解密手法，无法进行解密，这篇文章…
阅读更多...
JupyterNotebook 如何切换使用的虚拟环境kernel

JupyterNotebook 如何切换使用的虚拟环境kernel

在Jupyter Notebook中，如果需要修改使用的虚拟环境Kernel： 首先，需要确保虚拟环境已经安装conda上【conda基本操作】 打开Jupyter Notebook。 在Jupyter Notebook的顶部菜单中，选择 “New” 在弹出的窗口中，列出了…
阅读更多...
亮相AWE 2024，日立中央空调打造定制空气新体验

亮相AWE 2024，日立中央空调打造定制空气新体验

日立中央空调于3月14日携旗下空气定制全新成果，亮相2024中国家电及消费电子博览会（简称AWE 2024）现场，围绕“科创先行 智引未来”这一主题，通过技术与产品向行业与消费者，展现自身对于家居空气的理解。 展会…
阅读更多...
【零基础C语言】自定义类型：结构体

【零基础C语言】自定义类型：结构体

1.结构体的声明 struct tag {member - list; }variable-list; 我们描述一本书或者一个学生的时候可以这样写 //书 - 书名，作者，价格，序号struct book {char _book_name[20];char _author[20];int price;char id[20]; };//学生 - 姓名&…
阅读更多...
从头手搓一台ros2复合机器人（带机械臂）

从头手搓一台ros2复合机器人（带机械臂）

一.前言 大家好呀，从本小节开始我们就步入了仿真篇，主要对机器人仿真进行介绍与操作，当然仿真有优点也有缺陷，基于对此学习，我们可以对上几小节创建的小车模型模拟硬件的特性， 比如： 有多重…
阅读更多...
web学习笔记（三十三）

web学习笔记（三十三）

目录 1.严格模式 1.1严格模式的概念： 1.2严格模式在语义上更改的地方： 1.3如何开启严格模式 1.4严格模式应用上的变化 2.原型链 1.严格模式 1.1严格模式的概念： 严格模式有点像es5向es6过渡而产生的一种模式，因为es6的语法…
阅读更多...
Python-GEE绘制DEM精美图片

Python-GEE绘制DEM精美图片

目录 上传矢量和DEM获取添加颜色条参考文章 先连接上GEE的自己的项目 import ee import geemap geemap.set_proxy(port33210) ee.Authenticate() ee.Initialize(projecta-flyllf0313)上传矢量和DEM获取 使用Google Earth Engine（GEE）和Google Earth Eng…
阅读更多...
linux：线程互斥

linux：线程互斥

个人主页 ： 个人主页 个人专栏 ： 《数据结构》 《C语言》《C》《Linux》 文章目录 前言一、线程互斥问题解释互斥量的接口 二、加锁的原理三、 死锁死锁四个必要条件避免死锁 总结 前言 本文是对于线程互斥的知识总结 一、线程互斥 问题 我们先看下面…
阅读更多...
基础乱炖来吧

基础乱炖来吧

1,SSH框架和SSM区别 SSH：structspringhibernate，SSM：MVCspringmybatis struct入口是filter级别，对action类进行请求，一个action类对应一个请求、类拦截；spring-mvcservlet级别，方法级别请求&…
阅读更多...
海外代理IP在跨境电商中的五大应用场景

海外代理IP在跨境电商中的五大应用场景

在我国跨境电商的发展中，海外代理IP的应用日益广泛，它不仅帮助商家成功打入国际市场，还为他们在多变的全球电商竞争中保持优势。下面是海外代理IP在跨境电商中五个关键的应用场景。 1、精准的市场分析 了解目标市场的消费者行为、产品趋势以…
阅读更多...
Java语言: JVM

Java语言: JVM

1.1 内存管理 1.1.1 JVM内存区域 编号 名字 功能 备注 1 堆 主要用于存放新创建的对象 (所有对象都在这里分配内存) jdk1.8之后永久代被替换成为了元空间（Metaspace） 2 方法区(加、常、静、即) 被虚拟机加载的类信息(版本、字段、方法、接口…
阅读更多...
汽车电子零部件（8）：T_Box

汽车电子零部件（8）：T_Box

前言： 网联汽车（Connected Vehicles ，CV）是一个广泛的概念，四个主要的CV线程已发展起来：互联、自主、共享和电动。这些应用于包括CV在内的垂直领域：汽车、通信、互联网和共享手机服务。中国汽车工程师学会（SAEC）提倡将车载ADAS（高级驾驶员辅助系统）与通信技术相结合…
阅读更多...
（挖矿病毒清除）kdevtmpfsi 处理

（挖矿病毒清除）kdevtmpfsi 处理

Linux Centos 7 环境下的一台服务器CPU直接被打满，上服务器 top 命令看到了一个未知的 kdevtmpfsi 疯狂占用中，情况如下图： 同时阿里云检测平台，也同步提示对应容器出现的问题 问题原因： postgres RCE导致h2Miner蠕虫…
阅读更多...
ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

文章目录 前言相关链接Nuget选择知识补充JWT不是加密算法可逆加密和不可逆加密 普通Jwt（不推荐）项目环境Nuget 最小JWT测试在WebApi中简单使用简单使用运行结果 WebApi 授权，博客太老了，尝试失败 WebApi .net core 8.0 最新版Jwt …
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItemGroup）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItemGroup）

该组件用来展示列表item分组，宽度默认充满List组件，必须配合List组件来使用。 说明： 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。该组件的父组件只能是List。 使用说明 当List…
阅读更多...
51单片机LED8*8点阵显示坤坤跳舞打篮球画面

51单片机LED8*8点阵显示坤坤跳舞打篮球画面

我们作为一名合格的 ikun，专业的小黑子，这个重要的知识必须学会。 先看效果： 51LED点阵_鸡你太美 这里我们首先要用到延时函数Delay： void Delay(unsigned int xms) {unsigned char i, j;while(xms--){ i 2;j 239;do{while (-…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023