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

Question

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

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

我能够弄清楚如何做到这一点的唯一方法是使用 canvas 方法 getActiveObject()。这工作正常，但如果您选择了多个对象，您不知道要更新哪个。

最初将图像添加到 canvas 时，我将 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

不确定我是否读对了，但是你不能在创建织物对象时向它添加一个额外的属性来指示它是什么，然后用它来找出要删除哪个对象？

例如在上面，你会做 sprite.objectName = "tshirtSleeves"，然后当你得到新的 T 恤袖子时，获取 objectName = "tshirtSleeves" 的织物对象并将其删除。

Answer 2

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

如果 canvas 上有很多非图像对象，此选项当然可能会导致效率问题。但这是一个选择。

你当然需要在这之后做一个 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();
});

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

Using Fabric.js, when an image is scaled, how do you replace it with another image?

javascript

canvas

fabricjs