HarmonyOS应用《玄象》开发实战：卦象绘制：阳爻（▔）/ 阴爻（▔▔）的 Canvas 矩形堆叠
阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 5 篇 · 周易易学模块对应源码entry/src/main/ets/pages/yijing/HexagramsPage.ets、CastDivinationPage.ets前言卦象的爻线是《周易》最基本的视觉符号——阳爻为一条连续横线阴爻为两条断开的横线。玄象项目通过 Canvas 的fillRect矩形堆叠绘制六爻卦象每爻由上下两个半爻组成。本篇将深入剖析玄象项目卦象绘制的实现从阳爻/阴爻的矩形绘制算法、fillRect参数控制、六爻堆叠布局到爻间间距与动爻标记。掌握这套卦象绘制方法论您就能为任何 HarmonyOS 应用绘制完整的六爻卦象。提示玄象项目卦象绘制采用从上到下的堆叠顺序符合传统易学阅读习惯。一、阳爻绘制1.1 阳爻算法privatedrawYangYao(canvas:CanvasRenderingContext2D,x:number,y:number,width:number,height:number):void{canvas.fillStyleColors.PRIMARY_GOLD;canvas.fillRect(x,y,width,height);}二、阴爻绘制2.1 阴爻算法privatedrawYinYao(canvas:CanvasRenderingContext2D,x:number,y:number,width:number,height:number):void{constgapwidth*0.1;// 中间断开间距canvas.fillStyleColors.PRIMARY_GOLD;canvas.fillRect(x,y,(width-gap)/2,height);canvas.fillRect(x(widthgap)/2,y,(width-gap)/2,height);}三、六爻堆叠3.1 六爻绘制privatedrawHexagram(canvas:CanvasRenderingContext2D,yaos:number[],x:number,y:number,width:number):void{constyaoHeight6;constyaoGap4;consttotalHeight6*yaoHeight5*yaoGap;for(leti0;i6;i){constyaoYyi*(yaoHeightyaoGap);if(yaos[i]7||yaos[i]9){// 阳爻this.drawYangYao(canvas,x,yaoY,width,yaoHeight);}else{// 阴爻this.drawYinYao(canvas,x,yaoY,width,yaoHeight);}}}四、动爻标记4.1 动爻高亮privatedrawChangingYao(canvas:CanvasRenderingContext2D,x:number,y:number,width:number,height:number):void{canvas.fillStyle#FF5722;// 动爻用红色标记canvas.fillRect(x-4,y,2,height);}五、卦象绘制设计总结5.1 爻值对照爻值名称绘制方式是否动爻6老阴阴爻是7少阳阳爻否8少阴阴爻否9老阳阳爻是总结本篇以玄象项目卦象绘制为蓝本深入剖析了 Canvas 六爻绘制算法从阳爻/阴爻的fillRect矩形绘制、六爻堆叠布局、爻间间距控制到动爻标记。掌握这套卦象绘制方法论您就能为任何 HarmonyOS 应用绘制完整的六爻卦象。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档CanvasRenderingContext2DHarmonyOS 官方文档fillRect 方法周易六十四卦wikipedia.org/wiki/六十四卦开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net
)
)
