fabricjs 中的多个背景图像

Question

我正在使用 fabricjs 构建一个新应用程序，在这个我需要

用户控制多个背景图像，其中的行为与普通图像一样，用户可以旋转，拖动调整大小，它为多个 BG 做了一些类似的事情，

// 1st img
var img = new Image();
img.onload = function(){
 canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
        originX: 'left',
        originY: 'top',
        left: 100,
        top: 100
    });
};
img.src = "site_image/temp/zig3.jpg";

// 2nd img
var img1 = new Image();
img1.onload = function(){
 canvas.setBackgroundImage(img1.src, canvas.renderAll.bind(canvas), {
        originX: 'left',
        originY: 'top',
        left: 300,
        top: 300
    });
};
img1.src = "site_image/temp/zig1.jpg";

但是第一个BG被第二个替换了，是否可以由用户控制多个背景？

我还遇到了一个问题，我有 JSON 的 fabricjs，其中包括一个图像（普通图像不是背景），当我将它展示给用户时我希望这张图片成为 canvas,

Answer 1

只需在 JSON 文件中使用绝对路径并使用 AJAX 更改背景图像。此外，您可以按照此 [link][1] 获取 JSFiddle 示例。

[1]: https://jsfiddle 。 net/manish1706/qxnh4j53/

fabricjs 中的多个背景图像

Multiple background images in fabricjs

javascript

fabricjs