HarmonyOS应用开发：Path2D（画布组件）

最新推荐文章于 2024-09-30 16:19:01 发布
最新推荐文章于 2024-09-30 16:19:01 发布
阅读量672 收藏 17
点赞数 28
分类专栏： 鸿蒙 文章标签： harmonyos 华为 鸿蒙 深度学习 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanqaq/article/details/139864470
版权

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

说明：

从 API Version 8 开始支持。

addPath

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

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

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

参数：

参数类型必填默认值描述
pathpath2D是-需要添加到当前路径的路径对象。
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轴坐标。
ynumber是0目标点Y轴坐标。

示例：

// 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轴坐标。
ynumber是0目标点Y轴坐标。

示例：

// 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坐标值。
cp1ynumber是0第一个贝塞尔参数的y坐标值。
cp2xnumber是0第二个贝塞尔参数的x坐标值。
cp2ynumber是0第二个贝塞尔参数的y坐标值。
xnumber是0路径结束时的x坐标值。
ynumber是0路径结束时的y坐标值。

示例：

// 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坐标值。
cpynumber是0贝塞尔参数的y坐标值。
xnumber是0路径结束时的x坐标值。
ynumber是0路径结束时的y坐标值。

示例：

// 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坐标值。
ynumber是0弧线圆心的y坐标值。
radiusnumber是0弧线的圆半径。
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坐标值。
y1number是0圆弧经过的第一个点的y坐标值。
x2number是0圆弧经过的第二个点的x坐标值。
y2number是0圆弧经过的第二个点的y坐标值。
radiusnumber是0圆弧的圆半径值。

示例：

// 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轴坐标。
ynumber是0椭圆圆心的y轴坐标。
radiusXnumber是0椭圆x轴的半径长度。
radiusYnumber是0椭圆y轴的半径长度。
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坐标值。
ynumber是0指定矩形的左上角y坐标值。
wnumber是0指定矩形的宽度。
hnumber是0指定矩形的高度。

示例：

// 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学习资料

总结

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

「已注销」
关注
专栏目录
HarmonyOS鸿蒙开发指南:Canvas组件 Path2D对象
sybh的博客
01-09 721
先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。创建Path2D，使用多条线段组合图形。
鸿蒙HarmonyOS兼容JS的类Web开发-开发指导
特创数字
01-11 1057
设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Path）
m0_64420071的博客
03-18 1111
ArkTS声明式开发（绘制组件：Path）
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：Path2D）
m0_64420071的博客
03-19 1120
ArkTS声明式开发（画布组件：Path2D）
canvas笔记--Path2D篇
qq_44758643的博客
09-23 3139
Path2D对象 Path2() Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。 Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据 new Path2D(); //空路径对象 new Path2D(path); // 从另一个Path2D对象复制 new Path2D(d); // SVG路径数据中的路径 实例演示： 创建一个矩形和一个圆两者存储为path2D对象，以
Path2d:渲染器不可知的2D线路径表示
05-02
草案 ＃Path2d 渲染器不可知的2D线路径表示
使用Path2D和凸包算法实现地理围栏服务
weixin_34265814的博客
05-23 787
2019独角兽企业重金招聘Python工程师标准>>> ...
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：OffscreenCanvasRenderingContext2D）
m0_64420071的博客
03-19 1150
使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：CanvasRenderingContext2D）
m0_64420071的博客
03-19 1378
ArkTS声明式开发（画布组件：CanvasRenderingContext2D）
HarmonyOS Lottie组件，让动画绘制更简单
HarmonyOSDev的博客
02-22 1937
动画是UI界面的重要元素之一，精心设计的动画能使UI界面更直观，有助于改进应用程序的外观并改善用户体验。 ArkUI开发框架为开发者提供了丰富的动画能力，如属性动画、转场动画及自定义动画等。这些动画能力帮助开发者美化了UI界面，但不适用于绘制某些比较复杂的动画，例如，属性动画主要针对动画的通用属性进行动态变化，内容动效不够丰富，且变更时需要修改或重写代码；Gif动态图放大后锯齿明显，精度越高占用存储空间越大，直接影响安装包的大小；svg动画DOM节点多开销大，缺乏与用户的交互。 因此，我们引入.
Godot 4 源码分析 - Path2D与PathFollow2D
drgraph的博客
08-05 1503
因为路径是有长度的，本例中为2400，randi()值将按2400取模得到最终的随机值0 - 2399，当然也可以归一化，设置其progress_ratio值为0.0 - 1.0，意思一样。从PathFollow2D代码来看，它派生于Node2D，所以具备transform属性：Position、Rotation、Scale、Skew，对于路径上的点使用而言，这些信息就足够了，能够确定这些点的位置、方向，其实就是一个矢量。查看源码，set_progress的逻辑不只是取模，还有限制范围。
HTML5绘图笔记7：Path2D对象
YanHSama的博客
02-02 792
使用Path2D对象 例子1 <canvas id="myCanvas" width="600" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getCo...
java 地理围栏实现_使用Path2D和凸包算法实现地理围栏服务
weixin_31363631的博客
02-16 2071
前言地理围栏(Geo-fencing)是LBS的一种新应用，就是用一个虚拟的栅栏围出一个虚拟地理边界。在物流配送行业应用比较广，划分每个配送网点或者商家配送的范围，提高配送员的配送效率和服务的范围。1.使用Path2D创建一个多边形Path2D类是java.awt.geom包提供的工具包，可表示任意几何路径的简单而灵活的形状。它可以完全表示PathIterator接口可以迭代的任何路径，包括其所...
3、canvas的Path2D对像
weixin_34050389的博客
07-11 1308
2019独角兽企业重金招聘Python工程师标准>>> ...
Canvas 入门2 圆、矩形、路径、贝塞尔曲线、Path2D
编程圈子-谢厂节的博客
12-05 3323
模板骨架<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext
鸿蒙5.0版开发：ArkTS绘制组件（Line）
最新发布
m0_69424697的博客
09-30 878
直线绘制组件。
android中path的arcTo方法的使用
热门推荐
任俊杰的专栏
09-04 2万+
该方法的声明为： void android.graphics.Path.arcTo(RectF oval, float startAngle, float sweepAngle); 该方法是画一个弧线的路径. 第一个参数是一个RectF类型.这个参数是干嘛的呢？ 先说一下，这个弧线是怎么来的？是先画一个椭圆，然后再在这个椭圆上面截取一部分部形。这个图
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Line）
m0_64420071的博客
03-18 1963
ArkTS声明式开发（绘制组件：Line）
使用画布绘制自定义图形（Canvas）
01-15 2252
使用CanvasRenderingContext2D对象在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值