HarmonyOS自定義JS組件—代碼情詩
作者：包月東
人人說程序員很呆板，其實(shí)Coder也可以很浪漫，不信?今天就給大家在鴻蒙系統(tǒng)上實(shí)現(xiàn)一個(gè)代碼情詩。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
前言
人人說程序員很呆板，其實(shí)Coder也可以很浪漫(悶騷)，不信?今天就給大家在鴻蒙系統(tǒng)上實(shí)現(xiàn)一個(gè)代碼情詩。
效果圖
實(shí)現(xiàn)思路
我們要實(shí)現(xiàn)一個(gè)致Alice的情詩，情詩大體分為三個(gè)部分，收信人，情詩，寄信人。
- 收信人：這個(gè)簡單，就是兩個(gè)text，帶下劃線通過樣式border-bottom實(shí)現(xiàn)
- 情詩：情詩有兩個(gè)不規(guī)則的背景組成，背景可以通過canvas來繪制封閉的線段，并填充。文本當(dāng)然也是text了
- 寄信人：同收信人
- 動(dòng)畫：這里使用的是鴻蒙JS的組件動(dòng)畫，兩個(gè)平移，一個(gè)縮放。
- 切換詩歌：首先我們需要一個(gè)詩歌集，然后需要一個(gè)指針指向當(dāng)前詩歌，通過更改指針切換詩歌內(nèi)容。
具體實(shí)現(xiàn)
收信人
<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>
情詩的兩個(gè)不規(guī)則背景
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();
}
注：兩個(gè)不規(guī)則的背景懂事通過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>
動(dòng)畫
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();
},
注：這里只是提供了第一個(gè)部分的動(dòng)畫，其他部分類似，故不贅述。
切換詩歌
詩歌的集合：
const poetries = [
` function newTime(effort) {
if (effort == true)
return success
}
`,
` While (timeleft()>0)
If(canmove()==true)
Printf ("Protect you" )
`,
]
當(dāng)前顯示的詩歌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()
},
注：這里我們隊(duì)pointer進(jìn)行移位，然后更改poetry，重繪當(dāng)前界面。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
責(zé)任編輯：jianghua
來源：
鴻蒙社區(qū)
