使用Fabric.js，在缩放图像时，如何用另一个图像替换它？

Question

我正在使用FabricJS构建我的在线T恤设计师的新版本，以替换几年前创建的现有Flash。

我遇到了需要帮助的问题。 我使用的所有图像都是光栅图像。 缩放图像或对其进行更改（例如重新着色）时，我会调用服务器来创建新图像，然后需要能够替换画布上的现有图像。

我能够弄清楚如何做的唯一方法是使用画布方法getActiveObject（）。 这可以正常工作，但是如果选择了多个对象，则不知道要更新哪个对象。

当图像最初添加到画布上时，我在上面附加了onModified事件处理程序。 仅当图像的比例改变时，我才调用服务器端脚本来生成新图像。 下面列出了我当前使用的代码。 任何帮助将不胜感激。

谢谢

fabric.Image.fromURL(previewPath, function (img) {
var sprite = img.set({ left: leftX, top: topY, angle: angle, borderColor: 'black', cornerColor: 'red', cornerSize: 6, transparentCorners: false });
$scope.canvas.add(sprite);
$scope.canvas.renderAll();
sprite.on('modified', function () {
    // Modified event is only executed for scaling
    if (1 != sprite.scaleX.toString() || 1 != sprite.scaleY.toString()) {

        fabric.Image.fromURL(previewPath, function (img) {
            var newSprite = img.set({ left: leftX, top: topY, angle: angle, width: width, height: height });

            // Replaces visible object on canvas


            // Since new image is replacing old one, need to set the scale back to 1
            sprite.scale(1);

            $scope.canvas.renderAll();
        });


    }
});

Answer 1

不知道我是否正确阅读了它，但是在创建Fabric对象时，您是否能够向其添加一个额外的属性，指示其是什么，然后使用该属性找出要删除的对象？

例如，在上面，您将执行sprite.objectName =“ tshirtSleeves”，然后在获得新的T恤袖子时，使用objectName =“ tshirtSleeves”获​​取布料对象并将其删除。

Answer 2

您可以遍历画布上的所有对象，检查它是否为图像，然后根据需要更改图像。

如果您在画布上有很多非图像对象，那么此选项当然会带来效率问题。 但这是一个选择。

当然，您需要在此之后执行一次renderAll。

var objects = document.getElementById('canvasId').fabric._objects;

jQuery.each( objects, function( key, eachObject ) {
  if( eachObject.type == "image" ) {
    //Perform scale and image replacement as needed here
  }
});

$scope.canvas.renderAll();

Answer 3

实际上结果非常简单。 只需将新的图像URL传递给图像对象的setSrc方法，如下所示。

sprite.setSrc(previewPath, function (img) {
     sprite.scale(1);
     $scope.canvas.renderAll();
});