HarmonyOS应用《玄象》开发实战：Canvas 绘制星宿连线：moveTo / lineTo / stroke 路径绘制

阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 4 篇 · 二十八星宿模块对应源码entry/src/main/ets/pages/mansion/MansionListPage.ets、MansionDetailPage.ets前言玄象项目星宿相关页面大量使用 Canvas 路径绘制——星宿列表页的四象圆盘、详情页的星宿连线、星野分野页的古地图星线都通过moveTo/lineTo/stroke三步法实现。本篇将深入剖析玄象项目 Canvas 路径绘制的核心技巧从moveTo移动画笔、lineTo绘制线段、stroke描边输出到closePath封闭路径、lineWidth线宽控制、strokeStyle颜色设置。掌握这套 Canvas 路径绘制方法论您就能为任何 HarmonyOS 应用绘制复杂的几何图形。提示Canvas 路径绘制是 ArkUI 中最常用的图形绘制方式。玄象项目从星宿连线到罗盘刻度都依赖路径绘制 API。一、路径绘制三步法1.1 核心 API// 1. 开始新路径canvas.beginPath();// 2. 移动画笔到起点canvas.moveTo(x,y);// 3. 绘制线段到目标点canvas.lineTo(x,y);// 4. 描边输出canvas.stroke();1.2 玄象项目星宿连线示例canvas.strokeStyleColors.PRIMARY_GOLD;canvas.lineWidth1.5;canvas.beginPath();canvas.moveTo(points[0][0],points[0][1]);for(leti1;ipoints.length;i){canvas.lineTo(points[i][0],points[i][1]);}canvas.stroke();二、重点 API 详解2.1 beginPathbeginPath()开始新路径重置当前路径列表。2.2 moveTomoveTo(x, y)将画笔移动到指定坐标不画线。2.3 lineTolineTo(x, y)从当前画笔位置画线到指定坐标。2.4 strokestroke()使用当前strokeStyle描边路径。三、路径绘制参数3.1 strokeStylecanvas.strokeStyleColors.PRIMARY_GOLD;// 金色canvas.strokeStylergba(212, 168, 67, 0.3);// 半透明金3.2 lineWidthcanvas.lineWidth1.5;// 星宿连线canvas.lineWidth0.5;// 网格线极细canvas.lineWidth2;// 外圈较粗3.3 lineCapcanvas.lineCapround;// 圆头端点canvas.lineCapbutt;// 平头端点默认四、星宿列表页圆盘路径绘制4.1 四象分区扇区for(leti0;i4;i){conststartAngle(i*90-90)*Math.PI/180;constendAngle((i1)*90-90)*Math.PI/180;canvas.fillStylesiXiangColors[i]22;canvas.beginPath();canvas.moveTo(cx,cy);canvas.arc(cx,cy,outerR,startAngle,endAngle);canvas.closePath();canvas.fill();}五、路径绘制最佳实践5.1 状态隔离// 错误的状态污染canvas.strokeStylegold;canvas.moveTo(0,0);canvas.lineTo(100,100);canvas.stroke();// 正确canvas.lineTo(200,200);canvas.stroke();// 错误路径累积// 正确的每个路径独立canvas.beginPath();canvas.moveTo(0,0);canvas.lineTo(100,100);canvas.stroke();canvas.beginPath();canvas.moveTo(100,100);canvas.lineTo(200,200);canvas.stroke();5.2 性能优化// 批量绘制一次 beginPath 多次 lineTo 一次 strokecanvas.beginPath();canvas.moveTo(points[0][0],points[0][1]);for(leti1;ipoints.length;i){canvas.lineTo(points[i][0],points[i][1]);}canvas.stroke();// 一次性描边性能更优六、玄象项目路径绘制应用6.1 应用场景页面路径用途绘制数量启动页银河渐变、星宿连线6 条折线星宿列表四象圆盘、星宿点28 个星点星宿详情星宿连线5 个点连线星野分野古地图星线5 条连线风水罗盘罗盘刻度360 条线六、路径绘制的高级技巧6.1 路径缓存 (Path2D)对于复杂且重复使用的路径可使用Path2D缓存privatecachedPath:Path2D|nullnull;privatebuildStarPath(w:number,h:number):Path2D{if(this.cachedPath)returnthis.cachedPath;constpathnewPath2D();path.moveTo(w*0.2,h*0.6);path.lineTo(w*0.35,h*0.4);path.lineTo(w*0.5,h*0.3);path.lineTo(w*0.65,h*0.35);path.lineTo(w*0.8,h*0.5);this.cachedPathpath;returnpath;}6.2 路径绘制性能对比绘制方式100 条线段1000 条线段10000 条线段逐条 beginPath/stroke~1ms~10ms~100ms批量 lineTo 单次 stroke~0.5ms~3ms~30msPath2D 缓存~0.1ms~0.5ms~5ms6.3 玄象项目路径绘制应用场景页面路径用途线段数绘制方式启动页星宿连线6批量 lineTo太极图阴阳半圆2单次 arc星宿列表圆盘分区8批量 arc closePath星宿详情星点连线5批量 lineTo星野分野古地图星线5批量 lineTo七、路径绘制的调试技巧7.1 路径可视化调试Canvas 路径绘制时可用不同颜色区分不同路径段// 调试用红色标注路径起点蓝色标注路径终点canvas.strokeStyle#FF0000;canvas.lineWidth3;canvas.beginPath();canvas.moveTo(points[0][0],points[0][1]);for(leti1;ipoints.length;i){canvas.strokeStyleipoints.length-1?#0000FF:Colors.PRIMARY_GOLD;canvas.lineTo(points[i][0],points[i][1]);canvas.stroke();canvas.beginPath();canvas.moveTo(points[i][0],points[i][1]);}7.2 路径绘制常见错误错误现象原因解决方案路径不闭合缺少 closePath在 stroke 前调用 closePath路径重叠未调用 beginPath每条新路径前调用 beginPath颜色不对strokeStyle 未设置确保 stroke 前设置 strokeStyle线宽不对lineWidth 未设置确保 stroke 前设置 lineWidth7.3 路径绘制的性能基准// 测量路径绘制耗时privatemeasurePathPerformance():void{conststartperformance.now();// 绘制路径this.drawStarPath();constendperformance.now();hilog.info(0x0000,Canvas,Path draw took: %{public}d ms,end-start);}总结本篇以玄象项目 Canvas 路径绘制为蓝本深入剖析了 ArkUI 路径绘制核心 API从moveTo移动画笔、lineTo绘制线段、stroke描边输出到beginPath路径重置、closePath封闭路径、lineWidth线宽控制。掌握这套 Canvas 路径绘制方法论您就能为任何 HarmonyOS 应用绘制复杂的几何图形。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档CanvasRenderingContext2D开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net