企业官网建设流程全解析

组件简介

Path是 HarmonyOS ArkUI 提供的高级自定义绘图组件，支持通过SVG 路径命令绘制任意复杂图形，包括直线、矩形、多边形、曲线、圆弧、心形、不规则图形等。
它是 ArkUI 绘图能力最强大的组件，可实现所有基础绘图组件无法完成的自定义图形。

核心特点

• 支持 SVG 标准路径命令（M/L/Q/C/A/Z/H/V等）
• 可绘制直线、曲线、圆弧、闭合图形
• 支持填充、描边、渐变、虚线、透明度
• 必须设置width/height才能显示
• 坐标基于组件自身区域

标准核心属性

SVG 路径常用命令

示例场景说明

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')

• 双三次贝塞尔曲线
• 效果：标准心形 + 渐变填充

完整代码

@Entry@Componentstruct 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')}}}

运行效果如图：

总结

1. 必须设置 width 和 height，否则 Path 不显示。
2. commands 遵循 SVG 标准语法，大小写敏感。
3. 坐标必须在组件宽高范围内，否则会被裁剪。
4. Z命令可自动闭合路径，形成封闭图形。
5. 渐变填充优先级高于纯色填充。
6. Path是 ArkUI最强大的绘图组件
7. 通过commands可绘制任何自定义图形
8. 支持直线、矩形、曲线、圆弧、心形、波浪线、多边形等

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力