HarmonyOS 6 ArkUI Path（路径）组件使用文档

文章目录组件简介核心特点标准核心属性SVG 路径常用命令示例场景说明1. 基础直线2. 闭合三角形3. 矩形路径4. 二次贝塞尔曲线5. 三次贝塞尔曲线波浪线6. 椭圆弧7. 虚线路径8. 渐变填充心形完整代码总结组件简介Path是 HarmonyOS ArkUI 提供的高级自定义绘图组件支持通过SVG 路径命令绘制任意复杂图形包括直线、矩形、多边形、曲线、圆弧、心形、不规则图形等。它是 ArkUI 绘图能力最强大的组件可实现所有基础绘图组件无法完成的自定义图形。核心特点支持 SVG 标准路径命令M/L/Q/C/A/Z/H/V等可绘制直线、曲线、圆弧、闭合图形支持填充、描边、渐变、虚线、透明度必须设置width/height才能显示坐标基于组件自身区域标准核心属性属性名作用说明width绘制区域宽度必须设置height绘制区域高度必须设置commands路径绘制命令SVG 格式字符串核心属性fill填充颜色内部填充fillOpacity填充透明度0~1stroke描边颜色线条颜色strokeWidth描边宽度线条粗细strokeDashArray虚线样式[实线长度, 空白长度]linearGradient线性渐变填充渐变颜色SVG 路径常用命令命令含义M x y移动到起点Move ToL x y画线到点Line ToH x水平画线V y垂直画线Q x1 y1 x y二次贝塞尔曲线C x1 y1 x2 y2 x y三次贝塞尔曲线A rx ry x-axis-rotation large-arc sweep x y椭圆弧Z闭合路径示例场景说明1. 基础直线.commands(M0 10 L300 10)移动到 (0,10)画线到 (300,10)效果水平直线2. 闭合三角形.commands(M100 0 L0 120 L200 120 Z)3 点连线 Z 闭合效果实心三角形3. 矩形路径.commands(M0 0 H200 V100 H0 Z)水平 垂直画线效果空心矩形4. 二次贝塞尔曲线.commands(M0 50 Q150 0 300 50)单控制点曲线效果弧形抛物线5. 三次贝塞尔曲线波浪线.commands(M0 50 C75 0 150 100 225 50 C300 0 375 100 450 50)双控制点曲线效果连续波浪6. 椭圆弧.commands(M50 60 A80 50 0 1 0 250 60)绘制椭圆弧线效果上半圆弧7. 虚线路径.strokeDashArray([10,5])实线 10vp 空白 5vp效果虚线直线8. 渐变填充心形.commands(M100 30 C140 0 200 40 100 150 C0 40 60 0 100 30 Z)双三次贝塞尔曲线效果标准心形 渐变填充完整代码EntryComponentstruct PathDemo{build(){Scroll(){Column({space:30}){// 1. 基础直线Text(1. 基础直线).fontSize(14).fontColor(#666)Path().width(300).height(20).commands(M0 10 L300 10).stroke(#409EFF).strokeWidth(3)// 2. 三角形闭合路径Text(2. 闭合三角形).fontSize(14).fontColor(#666)Path().width(200).height(120).commands(M100 0 L0 120 L200 120 Z).fill(#67C23A).stroke(#333).strokeWidth(2)// 3. 矩形路径Text(3. 矩形路径).fontSize(14).fontColor(#666)Path().width(200).height(100).commands(M0 0 H200 V100 H0 Z).fillOpacity(0).stroke(#E6A23C).strokeWidth(3)// 4. 二次贝塞尔曲线Text(4. 二次贝塞尔曲线).fontSize(14).fontColor(#666)Path().width(300).height(100).commands(M0 50 Q150 0 300 50).stroke(#F56C6C).strokeWidth(3)// 5. 三次贝塞尔曲线波浪Text(5. 三次贝塞尔曲线).fontSize(14).fontColor(#666)Path().width(300).height(100).commands(M0 50 C75 0 150 100 225 50 C300 0 375 100 450 50).stroke(#9B59B6).strokeWidth(3)// 6. 椭圆弧Text(6. 椭圆弧).fontSize(14).fontColor(#666)Path().width(300).height(120).commands(M50 60 A80 50 0 1 0 250 60).stroke(#1ABC9C).strokeWidth(3)// 7. 虚线路径Text(7. 虚线路径).fontSize(14).fontColor(#666)Path().width(300).height(80).commands(M20 40 L280 40).stroke(#FF9800).strokeWidth(2).strokeDashArray([10,5])// 8. 渐变填充心形复杂路径Text(8. 渐变填充心形).fontSize(14).fontColor(#666)Path().width(200).height(180).commands(M100 30 C140 0 200 40 100 150 C0 40 60 0 100 30 Z).linearGradient({angle:90,colors:[[#FF5E7C,0.0],[#FF3A5C,1.0]]}).stroke(#fff).strokeWidth(2)}.width(100%).padding(20).backgroundColor(#F5F7FA)}}}运行效果如图总结必须设置 width 和 height否则 Path 不显示。commands 遵循 SVG 标准语法大小写敏感。坐标必须在组件宽高范围内否则会被裁剪。Z命令可自动闭合路径形成封闭图形。渐变填充优先级高于纯色填充。Path是 ArkUI最强大的绘图组件通过commands可绘制任何自定义图形支持直线、矩形、曲线、圆弧、心形、波浪线、多边形等如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力