更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com，与华为官方共同打造。背景和介绍在HarmonyOS官方提供的组件中JSUI没有图标组件。如果要使用图标，需要使用图片组件导入图片资源。如果需要改变图标的??状态或样式，需要用另外一张图片来代替，操作起来比较麻烦。在移动端使用图标的场景会更多。如果全部使用图片来实现效果，会增加很多图片资源引用，也会给代码开发带来很多不便。在这种背景下，我想实现一个图标组件，可以自定义样式，方便修改和引用，图标样式也可以动态切换。本项目使用官方徽章组件和canvas组件实现图标绘制。通过封装自定义组件，可以配置组件大小、样式、背景、角标、禁用等属性，实现图标的绘制。该自定义组件完全使用代码实现，没有引用任何外部资源或文件，可以方便的被各种项目引用。项目介绍项目名称：OpenHarmony-JS-Icon项目源码地址：https://gitee.com/chenqiao002/open-harmony-js-icon系列：OpenHarmony开发版本下JS自定义组件开发实例：OpenHarmony-SDK-6,DevEcoStudio2.2.0.200项目作者及维护者：陈乔Email：chenqiao002@chinasoftinc.com本示例基于OpenHarmony下的JavaScriptUI框架，通过使用通用组件、画布组件和自定义组件实现一个自定义的图标组件，你通过这个例子基本可以理解和使用这个组件。本项目基于OpenHarmony项目而非HarmonyOS项目，请注意运行环境。请参考OpenHarmony项目配置方法配置并运行项目。如果您不熟悉OpenHarmony的JS开发，请参考该项目的开发说明。文件目录在Pages目录下，索引首页只有一个，展示了图标自定义组件的使用示例。common文件夹下的icon文件夹是自定义图标组件，icon文件夹下的js文件夹是图标绘制的方法和数据。使用说明项目预览下载OpenHarmony-JS-Icon项目，启动DevEcoStudio并打开项目。进入entry->src->main->js->default->pages->index，打开index.hml点击Previewer进行预览。在index.hml第一行引入，引用自定义组件，这里我们设置name属性为icon。基本用法是通过设置图标组件的name属性来显示不同的图标。徽章提示通过设置icon组件的badge-config属性来设置徽章信息。badgeConfig:{config:{badgeColor:"#0a59f7",textColor:"#ffffff",},count:0,visible:true,}，图标颜色和背景颜色可以通过设置图标组件的color属性来设置，background-color可以设置图标的背景颜色。通过设置icon组件的size属性来控制icon的大小。禁用图标通过设置icon组件的disabled属性来控制图标是否禁用，disabled默认为false，禁用时图标为灰色state设置为true，color和badge-config属性只有在disabled为false时才生效。通过设置名字绘制图片图标组件属性的设置为图像的地址。APIprops代码示例：exportdefault{props:{//图标名称name:{default:''},//图标样式前缀classPrefix:{default:'hos-icon'},//图标大小size:{default:24,},//图标颜色color:{default:"#333333"},//图标背景颜色backgroundColor:{default:"#ffffff"},//徽章配置badgeConfig:{default:{config:{badgeColor:"#0a59f7",textColor:"#ffffff",},placement:"rightTop",count:0,maxcount:99,visible:false,label:"",}},//iconicondisableddisabled:{default:false},//icon点击方法携带的参数dataClick:{default:null}}}Events代码示例：hml文件，icon组件绑定点击事件和绑定点击实现参数：js文件，在iconClick方法上接收参数detail属性为绑定数据：iconClick(data){console.log("iconClick");console.log(data.detail);}执行结果：绘制原理所有图标drawing是基于HarmonyOSJSAPIcanvas组件实现的，按照官方的绘图方式自定义封装绘制图形，基本实现了以下封装的基本图形绘制。绘制直线绘制直线主要使用lineTo(x,y)方法。下例中的ctx.beginPath()是新建绘图路径，ctx.moveTo(10,10)是将当前路径的起点移动到指定点，ctx.lineTo(280,160)是画直线到终点，ctx.stroke()是画边框，画布每次画的都是透明路径，如果没有描边，绘制的路径不会显示；参数：Example:ctx.beginPath();ctx.moveTo(10,10);ctx.lineTo(280,160);ctx.stroke();绘制圆弧的API有两个，arc()和arcTo()，这里我们主要看arc(x,y,radius,startAngle,endAngle,anticlockwise)方法是如何绘制圆弧的。参数：例子：ctx.beginPath();ctx.arc(100,75,50,0,6.28);ctx.stroke();DrawanellipsearcDrawanellipsearc使用ellipse()，下面的例子中绘制了一个椭圆弧，但是在实际操作中，我发现如果绘制一个完整的椭圆，startAngle设置为Math.PI*0，并且endAngle设置为Math.PI*2，无法画出完整的椭圆，画布上什么也没有画。所以我使用中间角，然后两次调用ellipse()方法以获得完整的圆弧。不知道有没有人遇到过同样的问题或者知道根本原因可以交流一下。参数：示例：ctx.beginPath();ctx.ellipse(200,200,50,100,Math.PI*0.25,Math.PI*0.5,Math.PI,1);ctx.stroke();绘制矩形正式使用rect()方法绘制矩形，该方法的功能比较简单。一般我们在使用矩形的时候，可能会有圆角的需求。在这个项目中，我们并没有使用官方的方法来绘制，而是使用lineTo()直线和arc()圆弧的两个API包之一，可以绘制圆角矩形。详细请参考源码包参数：例：ctx.rect(20,20,100,100);//创建a100*100rectangleat(20,20)ctx.stroke();//绘制三次贝塞尔曲线ThedrawingofacubicBeziercurve三次贝塞尔曲线主要使用bezierCurveTo()参数：ctx.beginPath();ctx.moveTo(20,20);ctx.quadraticCurveTo(100,100,200,20);ctx.stroke();绘制二次贝塞尔曲线二次贝塞尔曲线的绘制主要使用quadraticCurveTo()。其实不管是三次方还是二次方，都是用额外的控制点来控制线的方向。画线是用高等数学中函数求导的方法计算出来的，所以不能快速准确的得到控制点的具体值。只有不断使用，反复尝试，才能掌握控制点的设置。参数：例子：ctx.beginPath();ctx.moveTo(20,20);ctx.quadraticCurveTo(100,100,200,20);ctx.stroke();绘制图片会用到drawImage()，单纯的绘制图片其实意义不大，因为有图像组件。该功能的主要作用是在前端裁剪图片，无需使用后台服务进行操作。参数：示例：vartest=this.$element('drawImage');varctx=test.getContext('2d');varimg=newImage();img.src='common/image/test.jpg';ctx.drawImage(img,50,80,80,80);使用fillText()方法绘制文本，其中ctx.font主要设置文本的样式、字号、粗细、字体系列等。参数：例子：ctx.font='35pxsans-serif';ctx.fillText("HelloWorld!",20,60);以上是本项目使用的主要API。为了方便图标数据结构的清晰配置，所有的API都进行了两次封装，数据结构和封装结果可以在项目源码中查看。注意事项您可以使用角标。使用它们时，您需要将所有徽章属性作为具有badge-config名称的对象传入。这个用法是指官方徽章组件。可以画图，在name属性上设置图片路径。路径必须是绝对路径或云路径。不能使用以“./”或“.../”开头的相对路径，图片大小必须和图标大小一致，否则可能导致绘制不完整，官方图片组件，这个功能有点鸡肋。虽然图标颜色可以设置为透明色，但不建议设置为透明色。透明颜色可能会导致某些图标绘制出与预期不同的效果。图标的形式参考了市面上主流的图标形式。所有图标都是在画布上绘制的，没有任何代码参考。使用的API为鸿蒙JSUI官方API。图标是用canvas绘制的，虽然在一些特殊的细节上可能不如矢量图标清晰，但是这个库理论上可以实现任何图标，如果有需要或者有新的图标可以画，欢迎留言，谢谢。目前已经绘制了230+个图标，计划中的图标已经基本完成，后续会持续更新，敬请期待。本项目使用画布绘制图标。其实图标可以参考自定义字体样式来实现字体图标。相对来说，字体图标文件更小，图标更清晰，更有利于更新管理。需要的话可以看VantOpenharmony。想了解更多更多内容请访问：与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com
