小程序使用canvas在页面初始化时,部分手机会有几率卡死?
发布于 4 年前 作者 wei38 9367 次浏览 来自 官方Issues
<canvas class="hand-writing" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" canvas-id="handWriting">

const app = getApp()
let pix = 5;
let tempPath = [];
Page({
    data: {
        penColor: 'black',
        lineWidth: 1.2,
        ifLay: false,
        isEmpty: true,
        apiUrl:'',
        uuid: '',
        isChecked:false,
        busId:'',
        resId:'',
        faceAuthId:'',
        signFileId:[],
        shareholderId:'',
        conferenceId: '',
        authType: '',
        faceVerifyId: '',
        oppositionReason:'',
        time:0,
        busApplId:'',
        videoStatus:'',
        signAuthId:'',
        type:'4',
        busFile: null,
        timer:1800,
        singTimer:'',
        ctx:null,
        paths: [], // 路径二维数组
        strokeWidth:5,
        i:'',
        signerId:'',
        rncId: '',
        faceId: '',
        applLen:''
    },
    onLoad: function (options) {      
        let ctx = wx.createCanvasContext('handWriting');
        // ctx.setFillStyle('transparent')
        // ctx.fillRect(0, 0, 1000, 1000)
        ctx.setLineWidth(this.data.strokeWidth)
        // ctx.draw()
        this.setData({
            ctx
        })
    },
    radiochange(){
        this.setData({
            isChecked: !this.data.isChecked
        })
    },
    uploadScaleStart(e) {     
        let point = {
            x: e.touches[0].x,
            y: e.touches[0].y
        };
        tempPath = [point];
    },
    uploadScaleMove(e) {       
        let point = {
            x: e.touches[0].x,
            y: e.touches[0].y
        };
        tempPath.push(point)
        let ctx = this.data.ctx;
        ctx.moveTo(tempPath[tempPath.length - 2].x, tempPath[tempPath.length - 2].y)
        ctx.setLineCap('round')
        // ctx.setLineJoin('round')
        ctx.lineTo(point.x, point.y)
        ctx.stroke()
        ctx.draw(true)
    },
    uploadScaleEnd: function (e) {
        let paths = this.data.paths;
        paths.push(tempPath);
        tempPath = [];
        // 利用临时数组来记录轨迹,最后保留,解决频繁setData导致性能急剧下降的问题
        this.setData({
            paths
        })
    }     
  
})
回到顶部