#过年不停更#HarmonyOS自定义JS组件——代码情诗 原创 精华

发布于 2022-2-14 19:28
浏览
5收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」

作者:包月东

前言

今天是情人节,首先祝大家情人节快乐,不知道大家是怎么打算过这个节日的呢。人人说程序员很呆板,其实Coder也可以很浪漫(闷骚),不信?今天就给大家在鸿蒙系统上实现一个代码情诗。

效果图

#过年不停更#HarmonyOS自定义JS组件——代码情诗-开源基础软件社区

实现思路

我们要实现一个致Alice的情诗,情诗大体分为三个部分,收信人,情诗,寄信人。

  • 收信人:这个简单,就是两个text,带下划线通过样式border-bottom实现
  • 情诗:情诗有两个不规则的背景组成,背景可以通过canvas来绘制封闭的线段,并填充。文本当然也是text了
  • 寄信人:同收信人
  • 动画:这里使用的是鸿蒙JS的组件动画,两个平移,一个缩放。
  • 切换诗歌:首先我们需要一个诗歌集,然后需要一个指针指向当前诗歌,通过更改指针切换诗歌内容。

具体实现

收信人

<div ref='part1' style="flex-direction : row;
        margin-start : 50;
        margin-top : 30;
        margin-bottom : 40;">
    <text>{{ To }}</text>
    <text class="underlineTxt">{{ Recipients }}</text>
</div>

情诗

<stack ref='part2' style="margin-start : 50; margin-end : 20; background-color : transparent;
        align-items : center;
        ">
    <canvas ref="frame1" style="width : 100%;"></canvas>
    <text class="poetry">{{ poetry }}</text>
</stack>

<stack ref='part3' style="margin-start : 50; margin-end : 20;
        background-color : transparent;
        width : {{ frame2_w }};
        height : {{ frame2_h }};
        margin-top : 10fp;
        align-items : center;
        ">
    <canvas ref="frame2" style="width : 100%;"></canvas>
    <text class="head">{{ footnote }}</text>
    <text class="footer">{{ footnote }}</text>

</stack>

情诗的两个不规则背景

drawFrame1() {
    const frame1 = this.$refs.frame1
    let ctx = 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() {
    const frame2 = this.$refs.frame2
    let ctx = 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画线然后填充。

寄件人

  <div ref='part4' style="flex-direction : column; width : 100%; align-items : flex-end;
            margin-end : 50; margin-top : 20;">
        <div style="flex-direction : row; width : 100%; justify-content : flex-end;
                ">
            <text>{{ From }}</text>
            <text class="underlineTxt">{{ name }}</text>
        </div>
        <div style="flex-direction : row; width : 100%; justify-content : flex-end; margin-top : 20;">
            <text>{{ DatePrefix }}</text>
            <text class="underlineTxt">{{ date }}</text>
        </div>
    </div>

动画

    showPart1() {
        let options = {
            duration: 2000,
            delay: 0
        };
        let keyframes = [
            {
                transform: {
                    translate: '-400px 0px',
                },
            },
            {
                transform: {
                    translate: '0px 0px',
                },
            }
        ]
        let animation = this.$refs.part1.animate(keyframes, options);
        animation.play();
    },

注:这里只是提供了第一个部分的动画,其他部分类似,故不赘述。

切换诗歌

诗歌的集合:

const poetries = [
`   function newTime(effort) {
       if (effort == true)
            return success
    }
`,

`   While (timeleft()>0)
    If(canmove()==true)
    Printf ("Protect you" )
`,
...
]

当前显示的诗歌pointer和文本

export default {
    data: {
        pointer: 0,
        poetry: poetries[0],

切换方法

 prePeotry() {
        this.pointer = Math.max(this.pointer-1, 0);
        console.log('this.pointer:'+this.pointer)
        this.poetry = poetries[this.pointer]
        this.draw()
    },

注:这里我们队pointer进行移位,然后更改poetry,重绘当前界面。

源码路径

https://gitee.com/freebeing/Js_CodePoetry.git

参考

情人节!程序员应该如何优雅的度过?

JS组件动画

CanvasRenderingContext2D

更多原创内容请关注:深开鸿技术团队

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-2-25 10:01:10修改
7
收藏 5
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐