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

Question

我目前正在做一个“Photo Collage Maker”项目，它需要更大的 Canvas 区域和数百个对象(文本、图像、形状、剪贴画等)。问题是在移动、缩放和旋转这些对象时，Fabric.js 渲染所有对象，这使得它太慢了。我只想在织物 Canvas 上渲染选定的对象。我也测试了 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

Answer 1

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

您提到要在织物 Canvas 上渲染所选对象，因此这应该可以满足您的要求。

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