鸿蒙开发-想画虚线和特效路径？PathEffect来帮忙

想画虚线PathEffect 让线条不再单调你有没有注意过地图上的国界线是虚线设计稿里的辅助线是虚线流程图里的判断分支也是虚线。在 HarmonyOS 的 drawing 模块里画虚线靠的是PathEffect。PathEffect 是什么PathEffect路径效果可以对 Pen 描绘的路径做变形。最常用的就是把实线变成虚线但它还能做更多——比如用自定义形状来做虚线段让线条看起来像一串小箭头、一串小圆点甚至一串小星星。下面是 PathEffect 的类型和使用流程标准虚线自定义形状虚线需要虚线或特效路径选择 PathEffect 类型createDashPathEffectcreatePathDashEffect设置 intervals 实线-空白模式设置 phase 偏移量用 Path 定义虚线段形状设置步长和样式 MORPH/ROTATE/TRANSLATEpen.setPathEffect 应用canvas.drawLine / drawPath 绘制画虚线createDashPathEffect最基础的用法import{drawing}fromkit.ArkGraphics2D;letintervals[10,5];// 实线10像素空白5像素leteffectdrawing.PathEffect.createDashPathEffect(intervals,0);intervals是一个数组描述虚线的实线-空白交替模式数组长度必须是偶数至少 2 个元素奇数位置第0、2、4…个是实线部分的长度偶数位置第1、3、5…个是空白部分的长度几个常见的虚线样式// 标准虚线10px 实线 5px 空白[10,5]// 长虚线20px 实线 10px 空白[20,10]// 点线交替10px 实线 3px 空白 2px 实线 3px 空白[10,3,2,3]// 点状线2px 实线 5px 空白[2,5]phase参数是偏移量——控制虚线从哪个位置开始。比如phase5意味着从实线的第 5 个像素开始画。你可以动态改变这个值来做出虚线滚动的动画效果。把虚线效果用在 Pen 上constpennewdrawing.Pen();pen.setColor(255,0,0,255);pen.setStrokeWidth(2);leteffectdrawing.PathEffect.createDashPathEffect([10,5],0);pen.setPathEffect(effect);canvas.attachPen(pen);canvas.drawLine(20,50,380,50);// 画一条蓝色虚线canvas.detachPen();用完后清除效果pen.setPathEffect(null);自定义形状虚线createPathDashEffectAPI 18如果你觉得普通的虚线太无聊了可以用createPathDashEffect把自定义形状当作虚线段// 创建一个小三角形作为虚线段letdashPathnewdrawing.Path();dashPath.moveTo(0,0);dashPath.lineTo(10,5);dashPath.lineTo(0,10);dashPath.close();letpathEffectdrawing.PathEffect.createPathDashEffect(dashPath,// 用这个形状作为虚线段50,// 步长每个虚线段之间的距离0,// 偏移量drawing.PathDashStyle.MORPH// 样式);pen.setPathEffect(pathEffect);PathDashStyle有三种样式MORPH虚线段会沿着路径的方向旋转平滑过渡ROTATE虚线段会旋转但在拐角处不会平滑过渡TRANSLATE虚线段不会旋转始终保持原始方向一般用MORPH效果最好——沿着曲线走的时候虚线段会跟着转弯。用圆形做虚线letcirclePathnewdrawing.Path();circlePath.addCircle(0,0,3);// 半径 3 的小圆letpathEffectdrawing.PathEffect.createPathDashEffect(circlePath,30,0,drawing.PathDashStyle.MORPH);这样画出来的虚线就是一串小圆点像铁轨上的铆钉一样。自定义形状虚线的三种 PathDashStyle 效果对比如下自定义形状虚线选择 PathDashStyleMORPH: 沿路径旋转且平滑过渡ROTATE: 沿路径旋转但拐角不平滑TRANSLATE: 不旋转保持原始方向适合: 曲线路径效果最自然适合: 直线路径适合: 需要固定方向的装饰完整示例多种虚线效果import{RenderNode}fromkit.ArkUI;import{common2D,drawing}fromkit.ArkGraphics2D;classDashLineRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 标准虚线constpen1newdrawing.Pen();pen1.setColor(255,255,0,0);pen1.setStrokeWidth(2);pen1.setPathEffect(drawing.PathEffect.createDashPathEffect([10,5],0));canvas.attachPen(pen1);canvas.drawLine(20,30,380,30);canvas.detachPen();// 点状线constpen2newdrawing.Pen();pen2.setColor(255,0,150,0);pen2.setStrokeWidth(3);pen2.setPathEffect(drawing.PathEffect.createDashPathEffect([2,8],0));canvas.attachPen(pen2);canvas.drawLine(20,70,380,70);canvas.detachPen();// 三角形虚线lettriPathnewdrawing.Path();triPath.moveTo(0,0);triPath.lineTo(8,4);triPath.lineTo(0,8);triPath.close();constpen3newdrawing.Pen();pen3.setColor(255,0,0,200);pen3.setStrokeWidth(2);pen3.setPathEffect(drawing.PathEffect.createPathDashEffect(triPath,40,0,drawing.PathDashStyle.MORPH));canvas.attachPen(pen3);canvas.drawLine(20,110,380,110);canvas.detachPen();// 圆形虚线letcirclePathnewdrawing.Path();circlePath.addCircle(0,0,4);constpen4newdrawing.Pen();pen4.setColor(255,200,0,200);pen4.setStrokeWidth(2);pen4.setPathEffect(drawing.PathEffect.createPathDashEffect(circlePath,30,0,drawing.PathDashStyle.MORPH));canvas.attachPen(pen4);canvas.drawLine(20,150,380,150);canvas.detachPen();}}这段代码画了四种不同风格的虚线红色标准虚线、绿色点状线、蓝色三角形虚线、紫色圆形虚线。动态虚线动画还记得phase参数吗如果你在draw方法里根据时间改变phase就能做出虚线流动的效果letphase(Date.now()/50)%15;// 每 50ms 偏移 1 像素leteffectdrawing.PathEffect.createDashPathEffect([10,5],phase);pen.setPathEffect(effect);这在加载动画、路径引导等场景中很常见——虚线像水流一样沿着路径流动。小结createDashPathEffect标准虚线用intervals数组定义实线-空白模式。createPathDashEffect自定义形状虚线用 Path 定义虚线段的形状。phase参数控制偏移量可以做虚线动画。PathDashStyle.MORPH让虚线段沿路径方向旋转效果最自然。setPathEffect(null)清除虚线效果。下一篇我们进入场景三AR 增强现实看看怎么用 AR Engine 做平面识别和图像跟踪。