HarmonyOS自定義JS組件—代碼情詩

作者：包月東 2022-02-21 15:16:30

系統 OpenHarmony

人人說程序員很呆板，其實Coder也可以很浪漫，不信?今天就給大家在鴻蒙系統上實現一個代碼情詩。

??想了解更多內容，請訪問：??

??51CTO和華為官方合作共建的鴻蒙技術社區??

??https://harmonyos.51cto.com??

前言

人人說程序員很呆板，其實Coder也可以很浪漫(悶騷)，不信?今天就給大家在鴻蒙系統上實現一個代碼情詩。

效果圖

實現思路

我們要實現一個致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()
    },