Mac电脑：鸿蒙OS应用开发-使用画布组件Canvas来绘制一把“直尺”

在鸿蒙OS应用开发的过程中，其JS UI模式提供的JS文档对多种类型的图形处理组件比较多，比如很多前端程序员熟悉的画布组件Canvas。今天，我们就利用这个组件来绘制一个带有刻度线的“直尺”。

一.使用canvas画布组件绘制“直尺”，具体实现的思路是怎样的？

首先，我们要了解“直尺”这个工具本身拥有的特征和主要属性，然后根据它的属性和基本特征进行更加真实的绘制。

直尺基本特征

从上图我们可以看到，直尺有边框界限、总量程、刻度线(如零刻度线)、分度值(刻度线之间的间距)和刻度单位(cm)。想要在鸿蒙OS中通过JS UI的方式去实现直尺的绘制，必须在使用canvas组件时借助图层这种思路。

如果您有PS等设计软件使用的经验，对图层的使用也非常了解的话，其实直尺的绘制就会变得非常简单，我的具体思路如下：

图层一.先绘制直尺的外部边框；

绘制直尺的边框轮廓

图层二.采用相对间距方式，根据边框的宽度加载数量较多的刻度线；

绘制直尺的刻度线

图层三.根据刻度线的位置，添加刻度线的量程值和单位，比如数字123或单位CM。

添加直尺的刻度值-量程值

按照上面的图层步骤，我们可以很快地在手机、平板电脑等华为显示设备上绘制出直尺。

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 = i*10;                //(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(), i*10+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文件中的代码进行优化，特别是自己需要对程序进行模块化处理时，我们面向对象的思想可以得到更多的体现。

结语：