鸿蒙5.0版开发：ArkTS绘制组件（Path）

于 2024-09-30 16:25:49 发布
阅读量689 收藏 26
点赞数 15
分类专栏： ArkUI 鸿蒙5.0 ArkTS 文章标签： harmonyos 华为 android 鸿蒙 前端 ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142659441
版权
ArkUI 同时被 3 个专栏收录
229 篇文章 0 订阅
订阅专栏
鸿蒙5.0
229 篇文章 0 订阅
订阅专栏
ArkTS
225 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

Path

路径绘制组件，根据绘制路径生成封闭的自定义形状。

说明：

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

子组件

无

接口

Path(value?: { width?: number | string; height?: number | string; commands?: string })

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数:

参数名类型必填说明
widthnumber | string否路径所在矩形的宽度
值为异常值或缺省时按照自身内容需要的宽度处理。
heightnumber | string否路径所在矩形的高度
值为异常值或缺省时按照自身内容需要的高度处理。
commandsstring否路径绘制的命令字符串
默认值：‘’
异常值按照默认值处理。

属性

除支持通用属性外，还支持以下属性：

commands

commands(value: string)

设置路径绘制的命令字符串，单位为px。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuestring是线条绘制的路径。
默认值：‘’

fill

fill(value: ResourceColor)

设置填充区域颜色。异常值按照默认值处理。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是填充区域颜色。
默认值：Color.Black

fillOpacity

fillOpacity(value: number | string | Resource)

设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string | Resource是填充区域透明度。
默认值：1

stroke

stroke(value: ResourceColor)

设置边框颜色，不设置时，默认没有边框线条。异常值不会绘制边框线条。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是边框颜色。

strokeDashArray

strokeDashArray(value: Array<any>)

设置线条间隙。线段相交时可能会出现重叠现象。异常值按照默认值处理。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueArray<any>是线条间隙。
默认值：[]

strokeDashOffset

strokeDashOffset(value: number | string)

设置线条绘制起点的偏移量。异常值按照默认值处理。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是线条绘制起点的偏移量。
默认值：0

strokeLineCap

strokeLineCap(value: LineCapStyle)

设置线条端点绘制样式。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLineCapStyle是线条端点绘制样式。
默认值：LineCapStyle.Butt

strokeLineJoin

strokeLineJoin(value: LineJoinStyle)

设置线条拐角绘制样式。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLineJoinStyle是线条拐角绘制样式。
默认值：LineJoinStyle.Miter

strokeMiterLimit

strokeMiterLimit(value: number | string)

设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。

该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是斜接长度与边框宽度比值的极限值。
默认值：4

strokeOpacity

strokeOpacity(value: number | string | Resource)

设置线条透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string | Resource是线条透明度。
默认值：1

strokeWidth

strokeWidth(value: Length)

设置线条宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是线条宽度。
默认值：1

antiAlias

antiAlias(value: boolean)

设置是否开启抗锯齿效果。

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是是否开启抗锯齿效果。
默认值：true

Commands

commands支持的绘制命令如下：

命令名称参数说明
Mmoveto（x y）在给定的 (x, y) 坐标处开始一个新的子路径。例如，M 0 0 表示将（0, 0）点作为新子路径的起始点。
Llineto（x y）从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，L 50 50 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。
Hhorizontal linetox从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，H 50 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。
Vvertical linetoy从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，V 50 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。
Ccurveto(x1 y1 x2 y2 x y)使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，C100 100 250 100 250 200 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。
Ssmooth curveto(x2 y2 x y)(x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，C100 100 250 100 250 200 S400 300 400 200第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。
Qquadratic Belzier curve(x1 y1 x y)使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，Q400 50 600 300 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。
Tsmooth quadratic Belzier curveto(x y)绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，Q400 50 600 300 T1000 300第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。
Aelliptical Arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。
Zclosepathnone通过将当前路径连接回当前子路径的初始点来关闭当前子路径。

例如： commands(‘M0 20 L50 50 L50 100 Z’)定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。

示例

// xxx.ets
@Entry
@Component
struct PathExample {
  build() {
    Column({ space: 10 }) {
      Text('Straight line')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // 绘制一条长600px，宽3vp的直线
      Path()
        .width('600px')
        .height('10px')
        .commands('M0 0 L600 0')
        .stroke(Color.Black)
        .strokeWidth(3)

      Text('Straight line graph')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // 绘制直线图形
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('210px')
          .height('310px')
          .commands('M100 0 L200 240 L0 240 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M0 0 H200 V200 H0 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('95%')

      Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // 绘制弧线图形
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('250px')
          .height('310px')
          .commands("M0 300 S100 0 240 300 Z")
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('210px')
          .height('310px')
          .commands('M0 100 A30 20 20 0 0 200 100 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('95%')
    }.width('100%')
    .margin({ top: 5 })
  }
}

星星不闪包退1
关注
专栏目录
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Path）
m0_64420071的博客
03-18 1115
ArkTS声明式开发（绘制组件：Path）
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Shape）
m0_64420071的博客
03-18 880
ArkTS声明式开发（绘制组件：Shape）
path绘制
bangan1464的博客
08-29 392
drawPath(Path path, Paint paint) 画自定义图形 drawPath(path)这个方法是通过描述路径的方式来绘制图形的，它的path参数就是用来描述图形路径的对象 Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。 把这些图形结合起来，就可以描述出很多复杂的图形。 Path有两类方法，一类是直接描述路径的，另一类...
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：Path2D）
m0_64420071的博客
03-19 1121
ArkTS声明式开发（画布组件：Path2D）
7. path路径绘制：使用path绘制曲线
一名全栈开发工程师
05-12 969
曲线在SVG中通常是通过贝塞尔曲线命令来绘制的，包括二次贝塞尔曲线（Q）和三次贝塞尔曲线（C）。这些命令允许我们创建平滑的曲线路径。
Canves基本操作（path简单路径绘制）
苏打水解渴的博客
06-09 1246
文章目录path常用的方法简介1. lineTo绘制直线2. moveTo 设置下次绘制的起点3. setLastPoint设置上次绘制的终点4. close 连接第一个点连接到最后一个点，形成一个闭合区域5. 添加内容到路径5.1 添加addRect 矩形5.3 添加addOval椭圆5.4 添加addCircle圆5.5 添加addPath路径5.5 添加addArc圆弧5.6 添加arcTo...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Slider）
m0_64420071的博客
03-12 1370
ArkTS声明式开发（基础手势：Slider）
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：OffscreenCanvasRenderingContext2D）
m0_64420071的博客
03-19 1153
使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等
鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：CanvasRenderingContext2D）
m0_64420071的博客
03-19 1381
ArkTS声明式开发（画布组件：CanvasRenderingContext2D）
自定义控件详解（二）：Path类 相关用法
defukwanmcth26174的博客
04-01 145
Path：路径 绘制路径：void drawPath (Path path, Paint paint) Path 可以绘制的路径 一、直线路径 　　1、基本方法　　　　　　 　　　　　　void moveTo (float startX, float startY) 　　　　　　　　直线的开始点；即将直线路径的绘制点定在（startX,startY）的位置； 　　　...
python中os.path_python学习笔记-os.path
weixin_39951112的博客
12-16 367
os.path是python的一个内部组件用来操作文件的文件名，对文件名字符串进行解析。在os模块中定义了一些变量名来帮助对文件名的处理主要有以下几个变量。os.sep:文件分隔符os.pardir:上级目录标志符为'..'os.curdir:当前目录标识符为'.'os.extsep:文件的后缀名分割符。>>> print(os.sep)/>>> print(o...
Android自定义控件系列--Path综述
代码小疯子
01-14 1164
Android自定义控件系列–Path综述Path 中文 释义为路径 然而它在自定义控件中却有着神一样的着色，这个神，是创造神奇效果的意思 1 Path 的创建Path path = new Path();2 Path绘制单纯的直线2-1 从默认开始//操作一 path.lineTo(100,100);//操作二 path.lineTo(200,400);canvas.drawPath(path,
HarmonyOS Next开发学习手册——使用NDK接口构建UI(构建自定义组件)
maniuT的博客
07-08 752
以下示例创建了一个自定义容器，该容器将子组件最大值加上额外边距作为自身大小，同时对子组件进行居中排布。图1自定义容器组件按照 接入ArkTS页面 创建前置工程。创建自定义容器组件封装对象。// 自定义容器组件示例public:// 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。// 注册自定义事件监听器。// 声明自定义事件并转递自身作为自定义数据。// 反注册自定义事件监听器。// 取消声明自定义事件。// 自定义属性事件更新需要主动调用标记脏区接口。
鸿蒙画布组件：【Path2D对象】
最新发布
2401_82772199的博客
07-22 829
路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口或者fill接口进行绘制。从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ArkTs配置ohpm环境变量
2301_76430284的博客
01-19 1500
进行下载，但部分小伙伴在执行命令时发现终端报错提示‘无法识别ohpm项’，这正是因为小伙伴们并没有将我们的执行文件添加至环境变量path中，下面由我来引导小伙伴们如何正确配置环境变量。复制右边的ohpm解释器文件路径，注意路径不要出现中文，如何在此电脑中查找刚刚复制的路径文件。首先我们打开DevEco Studio编译器点击左上角的文件，点击设置，搜索ohpm。点击新建，然后将刚刚复制的bin路径粘贴确定，这样就配置成功环境变量了。双击进入bin文件，复制文件bin所在的本机路径。选择高级，点击环境变量。
Path之基本操作 进阶篇
xifei66的博客
09-24 1788
一.Path常用方法表 为了兼容性(偷懒) 本表格中去除了部分API21(即安卓版本5.0)以上才添加的方法。 作用 相关方法 备注 移动起点 moveTo 移动下一次操作的起点位置 设置终点 setLastPoint 重置当前path中最后一个点位置，如果在绘制之前调用，效果和moveTo相同 连接直线 lineTo 添加上一个点到当前点之间的直线到Path 闭合路径 close 连接第一个点连接到最后一个点，形成一个闭合
绘制几何图形（Shape）
01-13 1236
绘制组件用于在页面绘制图形，Shape组件是绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考。
ArkTS页面渲染
爆金币了，老登！
03-22 1047
ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。从API version 9开始，该接口支持在ArkTS卡片中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值