Question

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

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

我能够弄清楚如何操作的唯一方法是使用canvas方法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

不确定我是否已正确读取它，但是当创建指示它的内容时，您无法在结构对象中添加额外属性，然后使用它来确定哪个对象去除？

e.g。在上面，你做了sprite.objectName =＆＃34; tshirtSleeves＆＃34;，然后当你得到新的T恤袖子时，用objectName =＆＃34; tshirtSleeves＆＃34;获得面料对象。并删除它。

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();
});

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

3 个答案: