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

Question

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

我想要以下内容：

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

现在canvas.renderAll()，我需要像canvas.renderObjects(activeObject). 如何在 Fabric.js 中实现此功能？

这是我的项目：免费编辑照片

Answer 1

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

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

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

Answer 2

可能有很多 renderAll() 方法

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