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();
    }
}

案例效果：