鸿蒙HarmonyOS实战：路径绘制组件-Path

于 2024-08-06 21:00:03 发布
阅读量977 收藏 30
点赞数 16
分类专栏： HarmonyOS 鸿蒙开发 OpenHarmony 文章标签： harmonyos 华为 前端 鸿蒙 鸿蒙系统 javascript android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxc195818/article/details/140965698
版权

说明：

该组件从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 })
  }
}

最后

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

点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助！~

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

​

 该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

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

2.视频学习资料+学习PDF文档

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


HarmonyOS Next 最新全套视频教程

​​

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

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

​​

《鸿蒙开发基础》

​​

《鸿蒙开发进阶》

《鸿蒙进阶实战》

​​

大厂面试必问面试题

​​

鸿蒙南向开发技术

​​

鸿蒙APP开发必备

​​
点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

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

                   

粉红鱼头
关注
  • 16
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS应用开发-Svg组件path体验.docx
06-05
通过本文档的学习，我们了解到了HarmonyOS中的`path`组件不仅可以绘制静态图形，还能结合动画效果实现更丰富的交互体验。掌握了这些基础概念及操作方法之后，开发者们可以更加灵活地使用`path`组件来提升应用程序的...
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Path）
最新发布
m0_64420071的博客
03-18 1041
ArkTS声明式开发（绘制组件：Path）
Canves基本操作（path简单路径绘制）
苏打水解渴的博客
06-09 1065
文章目录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...
ArkTs配置ohpm环境变量
2301_76430284的博客
01-19 1292
进行下载，但部分小伙伴在执行命令时发现终端报错提示‘无法识别ohpm项’，这正是因为小伙伴们并没有将我们的执行文件添加至环境变量path中，下面由我来引导小伙伴们如何正确配置环境变量。复制右边的ohpm解释器文件路径，注意路径不要出现中文，如何在此电脑中查找刚刚复制的路径文件。首先我们打开DevEco Studio编译器点击左上角的文件，点击设置，搜索ohpm。点击新建，然后将刚刚复制的bin路径粘贴确定，这样就配置成功环境变量了。双击进入bin文件，复制文件bin所在的本机路径。选择高级，点击环境变量。
Path之基本操作 进阶篇
xifei66的博客
09-24 1724
一.Path常用方法表 为了兼容性(偷懒) 本表格中去除了部分API21(即安卓版本5.0)以上才添加的方法。 作用 相关方法 备注 移动起点 moveTo 移动下一次操作的起点位置 设置终点 setLastPoint 重置当前path中最后一个点位置，如果在绘制之前调用，效果和moveTo相同 连接直线 lineTo 添加上一个点到当前点之间的直线到Path 闭合路径 close 连接第一个点连接到最后一个点，形成一个闭合
鸿蒙HarmonyOS实战-ArkUI组件（Shape）
shudaoshanQAQ的博客
01-06 1234
Shape组件是用于创建2D形状和粒子效果的组件。它可以创建包括圆形、正方形、三角形和多边形等基本形状，同时还可以自定义形状。Shape组件创建各种不同的效果，例如火花、烟雾、雨滴等。在使用Shape组件时，可以通过编辑顶点、路径和大小等属性来控制形状的外观和行为。
HarmonyOS应用开发-绘制图像实现.docx
05-13
在 HarmonyOS 应用开发中，绘制图像是一项重要的任务，特别是在创建富媒体或者交互式界面时。本知识点主要介绍如何使用 OffscreenCanvasRenderingContext2D API 在 offscreen canvas 上进行图像的绘制和处理，以及...
harmonyos英文怎么读-api-harmonyos-lite-wearable-ui:鸿蒙应用LiteWearableUI标准库-api
07-01
在标题中提到的"api-harmonyos-lite-wearable-ui"，指的是HarmonyOS Lite版本针对可穿戴设备的用户界面（UI）标准库API。这个库提供了开发者构建轻量级、高效且适应可穿戴设备屏幕特性的应用程序所需的功能。 ...
harmonyos源代码-harmonyos-oled-player:使用鸿蒙OS在0.96寸OLED屏上播放视频|Playvideoon0.
07-01
harmonyos-oled-player 使用鸿蒙OS在0.96寸OLED屏上播放视频 | Play video on 0.96' OLED display with Harmony OS 简介 基于HiSpark WiFi IoT套件（Hi3861芯片），板载0.96寸 128x64 分辨率的 OLED屏 板端程序使用...
harmonyos2-vedothibac2:绘制二阶的示例
07-01
如果您有隔离的模块和组件，测试将非常容易 测试运行应用程序 git clone https://github.com/TechMaster/vedothibac2.git cd vedothibac2 npm install node nopromise.js node promise.js node --harmony-async-...
Vue router中path和component的作用
weixin_43368552的博客
05-25 4448
path是路由参数，当url路径匹配到当前路由参数时，就会跳转到component所对应的页面组件 在本例子里面：当url地址是只有/的时候，自动跳转到Home这个组件页面。相当于通过path的信息跳转到对应的component页面。 component是获取跳转页面的地址 方式一： 和引入组件一样 先把要跳转的页面引入router js文件中再进行调用 方式二： 直接在component获取要跳转页面的位置 ...
Android绘图篇(三)——绘制Path路径及贝塞尔曲线
huxin1875的博客
03-31 6583
不废话，直
【Node.js】＜JavaScript 运行环境＞ path路径模块
范同学的学习历程
01-16 785
目录 一、path路径模块概述： 二、路径拼接： path.join()的语法格式： 1.参数解读： 2.path.join()代码示例： 三、获取路径中的文件名： path.basename(): 参数解读： path.basename()代码示例： 四、获取路径中的文件拓展名： path.extname()： 参数解读： path.extname() 的代码示例： 一、path路径模块概述： path 模块是 Node.js 官方提供的、用来处理路径的模...
自定义控件三部曲之绘图篇（六）——Path之贝赛尔曲线和手势轨迹、水波纹效果
热门推荐
启舰
03-28 3万+
前言：好想义无反顾地追逐梦想 相关文章：《Android自定义控件三部曲文章索引》:http://blog.csdn.net/harvic880925/article/details/50995268 从这篇开始，我将延续androidGraphics系列文章把图片相关的知识给大家讲完，这一篇先稍微进阶一下，给大家把《android Graphics（二）：路径及文字》略去的quadTo（二阶...
鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图
麦七的博客
09-19 5593
关于HarmonyOS 2.0相关应用软件的安装和使用可以参考鸿蒙初体验：从安装到第一个程序 Hello HarmonyOS 话不多说直接直奔主题 一、创建项目 首先我们打开DevEco Studio新建一个Js项目 二、项目结构 建立完成后可以看到我们的目录结构是这样的 是不是很像我们的Vue了呢，没错HarmonyOS的JS FA应用也是通过node.js去封装的 1.目录结构 目录结构中文件分类如下： .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。 .css结尾的CSS
path 的7种路径绘制效果
八步赶蝉
04-21 2237
1.代码如下:public class Main3Activity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout layout = n...
Python基础学习：pathlib模块
zhtysw的博客
06-08 2万+
pathlib——面向对象的文件系统路径代码资源：Lib/pathlib.py该模块提供了一些使用语义表达来表示文件系统路径的类，这些类适合多种操作系统。路径类被划分为纯路径（该路径提供了不带I/O的纯粹计算操作），以及具体路径（从纯路径中继承而来，但提供了I/O操作）。如果你之前从未使用过该模块或者不能确认该模块中那个类是你的任务所需要，请使用Path函数进行判别。它实例化了一个平台代码运行的具...
Path的用法总结
weixin_34344403的博客
07-25 1332
Path的用法总结 在之前总结canvas以及paint的时候说过，绘制需要的四个组件：一个保存像素的Bitmap，一个主持绘画操作的Canvas（往Bitmap写东西），一个绘制的基本元素（例如Rect,Path,Text,Btimap），一支画笔（用来描述绘画的颜色与风格）。canvas以及paint都已经总结了，接下来就是绘制的基本元素了，Rect、Text、Bitmap都不叫简单，绘制的基...
组件化学习（3）ARouter中的Path和Group注解
Android小白
12-02 2998
这里就不对ARouter进行全面分析了，而是把其思想抽象出来理解 1.介绍下Group和Path 在上一篇文章中也提到过，Group就是组，Path就是组里面具体的类。在ARouter的api模块中，有针对Group和Path的接口ARouterGroup和ARouterPath。如下 public interface ARouterGroup { Map<String, Class<? extends ARouterPath>> getGroupMap(); } ARou
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值