HarmonyOS应用开发-三方组件水波纹案例

/*Index.hml*/
    <stack class="container-stack">
        <text class="txt">点击出现水波</text>
        <canvas ref="ref_canvas" class="canvas" @touchstart='touchstartfunc' on:click="handleClick"/>
    </stack>

</div>

Index.css
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
/*    background-color: #5e7c85;*/
}

.div-titlebar {
    position: absolute;
    top: 52px;
}

.container-stack {
    align-items: center;
}

.canvas {
    width: 340px;
    height: 120px;
    border: 1px solid #111;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
}

.txt {
    align-items: center;
    width: 100%;
    height: 40px;
    font-size: 30px;
    text-align: center;
    color: #111;
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .canvas {
        width: 700px;
    }
}


/*index.hml*/
import device from '@system.device';

var ctx;

var mDownX;
var mDownY;

const DRAW_RADIUS_ZERO = 0;
const DRAW_RADIUS_MOVE = 50;

const DURATION = 400;
const FREQUENCY = 10;
var mCycle;

/*绘制的半径*/
var mDrawRadius;
/*绘制的最大半径*/
var mMaxRadius = 0;

var mStepRadius = 0;

var timer = null;

var viewWidth = 340;
var viewHeight = 118;

export default {
    data: {

    },
    onInit() {
        mCycle = DURATION / FREQUENCY;
        mCycle = 3.0 * mCycle;
    },
    onShow() {
        console.log("luzhen onShow");
        device.getInfo({
            success: function(data) {
                if (data.windowWidth < data.windowHeight) {
                    viewWidth = 338;
                } else {
                    viewWidth = 694;
                }
            },
            fail: function(data, code) {
                console.log('Failed to obtain device information. Error code:'+ code + '; Error information: ' + data);
            },
        });
        this.clipPath();
    },
    clipPath() {
        const el = this.$refs.ref_canvas;
        ctx = el.getContext('2d', {
            antialias: true
        });

        let radius = 8;
        ctx.beginPath();
        ctx.lineWidth = 0;
        ctx.strokeStyle = '#FFFFFF';
        ctx.moveTo(0, radius);
        ctx.bezierCurveTo(0, radius, 0, 0, radius, 0);
        ctx.lineTo(viewWidth - radius, 0);
        ctx.bezierCurveTo(viewWidth - radius, 0, viewWidth, 0, viewWidth, radius);
        ctx.lineTo(viewWidth, viewHeight - radius);
        ctx.bezierCurveTo(viewWidth, viewHeight - radius, viewWidth, viewHeight, viewWidth - radius, viewHeight);
        ctx.lineTo(radius, viewHeight);
        ctx.bezierCurveTo(radius, viewHeight, 0, viewHeight, 0, viewHeight - radius);
        ctx.closePath();
        ctx.clip();
        ctx.stroke();
    },
    touchstartfunc(msg) {
        mDownX = msg.touches[0].localX;
        mDownY = msg.touches[0].localY;

        this.updateDrawData();

        mStepRadius = 5 * mStepRadius;

        if (timer != null) {
            clearInterval(timer);
            timer = null;
        }
        timer = setInterval(this.run, 50);
    },
    updateDrawData() {
        this.setDrawRadius(DRAW_RADIUS_ZERO);

        /*计算最大半径*/
        let radiusLeftTop = Math.sqrt((mDownX - 10) * (mDownX - 10) + mDownY * mDownY);
        let radiusRightTop = Math.sqrt((viewWidth - (mDownX - 10)) *
        (viewWidth - (mDownX - 10)) +
        mDownY * mDownY);
        let radiusLeftBottom = Math.sqrt((mDownX - 10) * (mDownX - 10) +
        (viewHeight - mDownY) * (viewHeight - mDownY));
        let radiusRightBottom = Math.sqrt((viewWidth - (mDownX - 10)) * (viewWidth - (mDownX - 10)) +
        (viewHeight - mDownY) * (viewHeight - mDownY));

        let radiusArr = [radiusLeftTop, radiusRightTop, radiusLeftBottom, radiusRightBottom];
        let i = 0;
        for (; i < radiusArr.length; i++) {
            mMaxRadius = Math.max(mMaxRadius, radiusArr[i]);
        }

        mStepRadius = mMaxRadius / mCycle;
    },
    setDrawRadius(radius) {
        mDrawRadius = radius;
    },
    run() {
        mDrawRadius = mDrawRadius + mStepRadius;

        ctx.clearRect(0, 0, viewWidth, 120);
        ctx.beginPath();
        ctx.strokeStyle = '#58FAAC';
        ctx.fillStyle = '#58FAAC';
        ctx.globalAlpha = 0.7;

        if (mDrawRadius > mMaxRadius) {
            clearInterval(timer);
            timer = null;
            this.setDrawRadius(DRAW_RADIUS_ZERO);
            ctx.arc((mDownX - 10), mDownY, mMaxRadius, 0, 6.28);
            return;
        }

        ctx.arc((mDownX - 10), mDownY, mDrawRadius, 0, 6.28);
        ctx.stroke();
        ctx.fill();
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.