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

Question

我目前正在制作一个"Photo Collage Maker"项目,该项目需要更大的画布区域和数百个对象(文本,图像,形状,剪贴画等).问题是在移动,缩放和旋转这些对象时,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

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

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

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