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

Render selected object only while moving, scaling and rotating

本文关键字：对象 旋转 移动 缩放      更新时间：2023-09-26

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

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

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

你提到想要在织物画布的顶部呈现选定的对象，所以这应该满足你的要求。

在移动/缩放/旋转结束时，你必须恢复原始的画布元素，应用你的更改，并允许它做一个完整的重绘

可能有很多renderAll()方法

检查，如果是这种情况，你需要使用requestRenderAll()方法

相关文章：