加入“非实时渲染”以解决频繁绘制 canvas 带来的卡顿问题

[liudding]

[liudding]

非实时渲染

在 canvas 下面放置一个 <image/>, 当移动图片、放大缩小图片时，不对 canvas 执行绘制，而是更新 <image/> 的位置和大小。当最后点击触发 getCropperImage 时，再执行绘制 canvas。

本次 pr 欠缺之处：

• 在 weCropper 中引用了 pageContext。造成循环引用
• 在 weCropper 中更新 page 页面，且使用了固定变量 cropperOpt
• mpvue-cropper 未修改。

[JE-lee]

非实时渲染是否可以考虑对selft.updateCanvas() 做节流处理,这样子是否就可以不依赖于外部page 的image 标签? 而且通过 <image styel="top:{{imageTop}}"> 这种方式来操作节点，貌似也有很大的性能问题。我之前有个案例做拖拽的，就试过再touchmove 中操作style 的top,left，真的很卡。

做个trace 对比如何？

[BoleLee]

[小心翼翼地]问下这个准备发新版本了吗？

[aheadcn]

文件特别大，选择原图，移动和裁切都非常卡