Question

我正在构建一个可以设计自己名片的应用。我必须在一次单击中将对象添加到两个画布。这是我的代码：

$('#image-list').on('click','.image-option',function(e) {
        var el = e.target;
        /*temp code*/
        var offset = 50;
        var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
        var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
        var angle = fabric.util.getRandomInt(-20, 40);
        var width = fabric.util.getRandomInt(30, 50);
        var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
        var canvasObject;
        // if ($('#flip').attr('data-facing') === 'front') {
        //  canvasObject = canvas;
        // } else {
        //  canvasObject = canvas2;
        // }

        fabric.Image.fromURL(el.src, function(image) {
            image.set({
                left: left,
                top: top,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint:true
            });

            canvas.add(image);
            canvas2.add(image);
        });
    })

问题是，当我调整大小或在'前画布'上移动图像时，它也会在'后画布'中呈现相同的方式。在我的情况下，我不希望对象是这样的。那么有没有办法阻止对其他画布上的'镜像'？感谢。

Answer 1

您无法将相同的对象添加到2幅画布中。你必须创建2个对象。

另请注意，如果页面上有html图像元素，则无需再次从URL加载。已经加载，所以直接将image元素传递给构造函数

$('#image-list').on('click','.image-option',function(e) {
    var el = e.target;
    /*temp code*/
    var offset = 50;
    var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
    var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
    var angle = fabric.util.getRandomInt(-20, 40);
    var width = fabric.util.getRandomInt(30, 50);
    var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
    var canvasObject;
    // if ($('#flip').attr('data-facing') === 'front') {
    //  canvasObject = canvas;
    // } else {
    //  canvasObject = canvas2;
    // }

    image = new fabric.Image(el, {
            left: left,
            top: top,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint:true
        });

    image2 = new fabric.Image(el, {
            left: left,
            top: top,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint:true
        });

        canvas.add(image);
        canvas2.add(image2);
    });
})

javascript fabricjs - 只需单击即可将对象添加到多个画布

1 个答案: