直尺基本特征
从上图我们可以看到，直尺有边框界限、总量程、刻度线(如零刻度线)、分度值(刻度线之间的间距)和刻度单位(cm)。想要在鸿蒙OS中通过JS UI的方式去实现直尺的绘制，必须在使用canvas组件时借助图层这种思路。
如果您有PS等设计软件使用的经验，对图层的使用也非常了解的话，其实直尺的绘制就会变得非常简单，我的具体思路如下：
图层一.先绘制直尺的外部边框；
绘制直尺的边框轮廓
图层二.采用相对间距方式，根据边框的宽度加载数量较多的刻度线；
绘制直尺的刻度线
图层三.根据刻度线的位置，添加刻度线的量程值和单位，比如数字123或单位CM。
添加直尺的刻度值-量程值
按照上面的图层步骤，我们可以很快地在手机、平板电脑等华为显示设备上绘制出直尺。
二.理清绘制“直尺”的基本思路之后，我们需要通过DevEco Services编辑器进行编程，真正去实现直尺在屏幕上的显示。1).首先，我们要创建一个JS UI模式的项目。
选择JS UI模式
2).其次，在项目中的index.hml文件中添加“canvas”组件和“input”的button组件，让直尺的外形能够在canvas的画布中进行呈现，并通过button事件进行触发。
index.hml中代码：
/ 以下代码内容，在index.hml中进行编写 /<div class="container"> <canvas ref="canvas1" style="width: 1000px; height: 600px; background-color: #000000;"></canvas> <input type="button" style="width: 180px; height: 60px;" value="直尺" onclick="handleClick" /></div>
3).给直尺提供触发的事件和画布空间区域后，我们要开始绘制直尺的边框轮廓、刻度线和量程值，我现在是通过canvas组件提供的CanvasRenderingContext2D对象其fillStyle()方法进行逐步实现。
直尺整体绘制的实现，需要通过button的handleClick()事件来进行触发，我们可以在index.js文件中去编写，具体代码内容为：
/ 以下代码内容，在index.js中进行编写 实现图层一：绘画直尺的边框轮廓 注意：以下编写内容需要提前了解前端的“ES6语法”和原Javascript的基本语法。 /export default { handleClick() { const el = this.$refs.canvas1; const ctx = el.getContext('2d'); //开始绘画直尺 ctx.beginPath(); //图层一.绘制直尺边框轮廓 ctx.fillStyle = '#FFB52F'; ctx.fillRect(70, 100, 600, 120); //图层二.绘制直尺的“刻度线” 和 添加刻度线的“量程值” for(let i = 0; i < 60;i++){ if(i > 0){ctx.fillStyle = '#000000'; let scaleX = i10; //(1)最短刻度线，高度为15px ctx.fillRect(scaleX + 80,100,3,15); if(i%10==0){ //(2).只能被10整除，则为最高刻度线"，高度为30px ctx.fillRect(scaleX + 80,100,3,35); ctx.font = '25px'; //标记最高刻度线的量程值(单位为厘米)，比如1cm、2cm、3cm let strNum = i / 10; ctx.strokeText(strNum.toString(), i10+70, 155); } if(i%5==0 && i%10!=0 ){ //(3).能被5整除且不能被10整除，则为"中刻度线"，为25 ctx.fillRect(scaleX + 80,100,3,25); } }//初始刻度线-零刻度线 ctx.fillStyle = '#000000'; ctx.fillRect(80,100,3,35);//初始刻度线的量程值为“0”; ctx.font = '25px'; ctx.strokeText("0", 80, 155); }; //生成"直尺"边框轮廓 ctx.stroke(); }, }
4).直尺绘制完成之后，我们需要在虚拟设备上进行调试，看直尺是否能够进行正常显示，如下图：
最后，绘制的直尺在屏幕中正常显示之后，我们仍需要花时间对index.js文件中的代码进行优化，特别是自己需要对程序进行模块化处理时，我们面向对象的思想可以得到更多的体现。
结语：使用JS UI的方式通过华为DevEco Services编辑器来开发出“直尺”，其实并不难，我们需要更多了解Canvas组件，具体相关内容我们需要去参考HarmonyOS的JS API文档，这样可以让开发的过程中减少技术选择上的时间成本和代码编写的难度。
