微信小程序canvas绘制问题

该项目使用uni-app
1、由于微信小程序使用canvas如果过多调用draw()方法【绘制点,线等】,会导致绘制出现延时问题,所以在保证同一时间所绘制的点不要太多的情况下进行绘制,避免出现卡顿;
2、在1的基础上,如果反复在canvas上绘制,当绘制足够多的情况下仍然会出现卡顿的情况,这情况下就重新在当前界面绘制的图形生成图片路径canvasToTempFilePath,然后绘制drawImage
vue代码

<canvas class="handWriting " disable-scroll="true" @touchstart="uploadScaleStart"
            @touchmove="uploadScaleMove" @touchend="uploadScaleEnd" @tap="mouseDown" :canvas-id="canvasName">
        </canvas>

js 代码

// 笔迹结束
           uploadScaleEnd(e) {
                this.canvasToTempFilePath()
            },
        canvasToTempFilePath(success, error) {
                var that = this;
                uni.canvasToTempFilePath({
                    canvasId: this.canvasName,
                    success: (res) => {
                        if (success) {
                            success(res.tempFilePath);
                        }
                        that.drawCacheImage(res.tempFilePath);
                    },
                    fail: (res) => {
                        console.log(res)
                        if (error) {
                            error(res)
                        }
                    },
                    complete: (res) => {
                        console.log(res)
                    }
                }, this);
            },
             drawCacheImage(path,canvasName){
            var ctx = this.ctx;
                ctx.drawImage(path, 0, 0, this.canvasWidth, this.canvasHeight);
                ctx.draw();
            }

当然可以使用两个canvas 进行缓存绘制,然后控制z-index来切换显示图层,但是在小程序上会看到明显的闪屏现象,因此两个canvas文案有点缺陷

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容