HarmonyOS自定义JS组件——代码爱诗

时间：2023-03-12 05:24:37 科技观察

更多内容请访问：与华为官方共建的Harmonyos技术社区https://harmonyos.51cto.com前言大家都说程序员很无聊，但其实Coder也可以很浪漫（monsao），你信不信？今天给大家送一首鸿蒙系统的代码情诗。效果图实现思路我们想实现一首写给爱丽丝的情诗。情诗大致分为三个部分，收信人、情诗、寄信人。收件人：这很简单，就是两条带下划线的文字。实现border-bottom样式的情诗：情诗由两个不规则的背景组成，背景可以通过canvas绘制闭合的线段并填充。当然，文字也是文字。发件人：同收件人动画：这里使用鸿蒙JS组件动画，两平一放大。切换诗歌：首先我们需要一个诗歌集，然后我们需要一个指向当前诗歌的指针，通过改变指针来切换诗歌内容。实体现实收信人{{To}}{{Recipients}}

情诗{{诗歌}}{{footnote}}<文本class="footer">{{脚注}}爱情诗的两个不规则背景drawFrame1(){constframe1=this.$refs.frame1letctx=frame1.getContext('2d')ctx.beginPath()ctx.moveTo(0,0)ctx.lineTo(this.frame_w,0)ctx.lineTo(this.frame_w*0.9,this.frame_h*0.5)ctx.lineTo(this.frame_w,this.frame_h)ctx.lineTo(0,this.frame_h)ctx.closePath()ctx.fillStyle="#dc3e3f"ctx.fill();},drawFrame2(){constframe2=this.$refs.frame2letctx=frame2.getContext('2d')ctx=frame2.getContext('2d')ctx.beginPath()ctx.moveTo(0,0)ctx.lineTo(this.frame2_w*0.9,0)ctx.lineTo(this.frame2_w,this.frame2_h)ctx.lineTo(0,this.frame2_h)ctx.closePath()ctx。fillStyle="#dc3e3f"ctx.fill();}注：两个不规则的背景可以通过context画线然后填充寄件人