仅在移动、缩放和旋转时渲染选定对象答案

【问题标题】：Render selected object only while moving, scaling and rotating仅在移动、缩放和旋转时渲染选定对象
【发布时间】：2013-04-29 21:22:03
【问题描述】：

我目前正在做一个“照片拼贴制作”项目，该项目需要更大的画布区域和数百个对象（文本、图像、形状、剪贴画等）。问题是在移动、缩放和旋转这些对象时，Fabric.js 会渲染所有对象，这使其速度过慢。我只想在织物画布上渲染选定的对象。我也测试了 renderOnAddition、renderTop，但它们不是我想要的。

我想要以下：

canvas.on('object:moving', function(e) {
    var activeObject = e.target;
    //canvas.renderAll();
    canvas.renderObjects(activeObject);
});

现在我需要 canvas.renderObjects(activeObject) 这样的方法，而不是 canvas.renderAll()。如何在 Fabric.js 中实现此功能？

这是我的项目：Edit Photos For Free

【问题讨论】：

必须全部渲染，没有别的办法。它不会测量哪个对象的状态发生了变化，绘制过程是绘制像素。就像数字视频中的帧一样，即使是静态图片，也有25帧……
如果不可能，为了fabricjs的性能，我该如何实现cacheAsBitmap属性，以便只渲染移动部分，而所有其他静态部分都缓存为位图。有什么想法和算法可以在 fabricjs 上实现吗？
抱歉，这里帮不上忙。祝你好运
这条评论可能和你想做的事情有关：github.com/kangax/fabric.js/issues/318

标签： javascript fabricjs photos

【解决方案1】：

最好的办法是在主画布前面有第二个画布，您可以在上面移动/缩放/旋转当前项目。

您提到想要在织物画布上渲染选定的对象，所以这应该满足您的要求。

在结束移动/缩放/旋转时，您必须恢复原始画布元素，应用您的更改，并允许它进行完全重绘。

【讨论】：

【解决方案2】：

可能有很多 renderAll() 方法

检查是否需要使用 requestRenderAll() 方法

【讨论】：