<template>
    <view class="mainview" @click="viewClick">
        <canvas canvas-id="mycanvas" class="canvas" :style="add_class_canvas"/>
        <!-- <image :src="condition == 0 ? \'../../static/images/heart_button.png\':\'../../static/images/heart1.png\'" class="heart"
            @click="onClickImage" :style="style_img"></image> -->
    </view>

</template>

<script>
    export default {
        data() {
            return {
                add_class_canvas:\'\',
                add_class_img:\'\',
                lastFrameTime: 0,
                count: 0,
                ctx: null,
                factor: {
                    speed: .008, // 运动速度，值越小越慢
                    t: 0 //  贝塞尔函数系数
                },
                timer: null,
                style_img: \'\',
                pageX: 0,
                pageY: 0,
                condition: 1,
                img_path: [
                    [{
                        x: 30,
                        y: 400
                    }, {
                        x: 70,
                        y: 300
                    }, {
                        x: -50,
                        y: 150
                    }, {
                        x: 30,
                        y: 0
                    }],
                    [{
                        x: 30,
                        y: 400
                    }, {
                        x: 30,
                        y: 300
                    }, {
                        x: 80,
                        y: 150
                    }, {
                        x: 30,
                        y: 0
                    }],
                    [{
                        x: 30,
                        y: 400
                    }, {
                        x: 0,
                        y: 90
                    }, {
                        x: 80,
                        y: 100
                    }, {
                        x: 30,
                        y: 0
                    }]
                ]
            }
        },
        onLoad() {
            this.ctx = wx.createCanvasContext(\'mycanvas\')
        },
        onUnload() {
            if (this.timer != null) {
                clearTimeout(this.timer)
            }
        },
        methods: {
            viewClick(e) {
                this.pageX = e.touches[0].pageX
                this.pageY = e.touches[0].pageY
                this.add_class_canvas = \'right:calc(100vw - \'+(this.pageX+45)+\'px);\'+\'bottom:calc(100vh - \'+this.pageY+\'px);\';
                // this.add_class_img = \'right:calc(100vw - \'+(this.pageX-25)+\'px);\'+\'bottom:calc(100vh - \'+this.pageY+\'px);\';
                // this.style_img = this.add_class_img+\'transform:scale(1.1);\'
                this.condition = 0
                this.factor.t = 2
                this.count = 0
                this.startTimer(1)
            },
            //不断绘制图片到cavans
            requestAnimationFrame(callback) {
                var currTime = new Date().getTime();
                //手机屏幕刷新率一般为60Hz，大概16ms刷新一次，这里为了使页面看上去更流畅自然,通过改变timedis的值可以控制动画的快慢
                var timedis = 16 - (currTime - this.lastFrameTime)
                var timeToCall = Math.max(0, timedis);
                var id = setTimeout(callback, timeToCall);
                this.lastFrameTime = currTime + timeToCall;
                return id;
            },
            drawImage(data, repeatcount) {
                if (repeatcount == 0) {
                    return
                }
                var p10 = data[0][0]; // 三阶贝塞尔曲线起点坐标值
                var p11 = data[0][1]; // 三阶贝塞尔曲线第一个控制点坐标值
                var p12 = data[0][2]; // 三阶贝塞尔曲线第二个控制点坐标值
                var p13 = data[0][3]; // 三阶贝塞尔曲线终点坐标值

                var p20 = data[1][0];
                var p21 = data[1][1];
                var p22 = data[1][2];
                var p23 = data[1][3];

                var p30 = data[2][0];
                var p31 = data[2][1];
                var p32 = data[2][2];
                var p33 = data[2][3];

                var t = this.factor.t;

                /*计算多项式系数*/
                var cx1 = 3 * (p11.x - p10.x);
                var bx1 = 3 * (p12.x - p11.x) - cx1;
                var ax1 = p13.x - p10.x - cx1 - bx1;

                var cy1 = 3 * (p11.y - p10.y);
                var by1 = 3 * (p12.y - p11.y) - cy1;
                var ay1 = p13.y - p10.y - cy1 - by1;

                /*计算xt yt坐标值 */
                var xt1 = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p10.x;
                var yt1 = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p10.y;

                /** 计算多项式系数*/
                var cx2 = 3 * (p21.x - p20.x);
                var bx2 = 3 * (p22.x - p21.x) - cx2;
                var ax2 = p23.x - p20.x - cx2 - bx2;

                var cy2 = 3 * (p21.y - p20.y);
                var by2 = 3 * (p22.y - p21.y) - cy2;
                var ay2 = p23.y - p20.y - cy2 - by2;

                /*计算xt yt坐标值*/
                var xt2 = ax2 * (t * t * t) + bx2 * (t * t) + cx2 * t + p20.x;
                var yt2 = ay2 * (t * t * t) + by2 * (t * t) + cy2 * t + p20.y;


                /** 计算多项式系数*/
                var cx3 = 3 * (p31.x - p30.x);
                var bx3 = 3 * (p32.x - p31.x) - cx3;
                var ax3 = p33.x - p30.x - cx3 - bx3;

                var cy3 = 3 * (p31.y - p30.y);
                var by3 = 3 * (p32.y - p31.y) - cy3;
                var ay3 = p33.y - p30.y - cy3 - by3;

                /*计算xt yt坐标值*/
                var xt3 = ax3 * (t * t * t) + bx3 * (t * t) + cx3 * t + p30.x;
                var yt3 = ay3 * (t * t * t) + by3 * (t * t) + cy3 * t + p30.y;
                this.factor.t += this.factor.speed;
                this.ctx.drawImage("../../static/images/heart1.png", xt1, yt1, 30, 30);
                this.ctx.drawImage("../../static/images/heart2.png", xt2, yt2, 30,  
                       
                    
                    
 
                      




鲜花




握手




雷人




路过




鸡蛋