如何使用 fabricjs 将多个图像添加到 canvas

Question

我已经阅读了几本关于这个主题的 questions/answers，但我似乎找不到我的解决方案。很抱歉，如果你们发现这个问题重复了。

这是我的情况；假设我有一个菜单供用户单击它，它将在 canvas 上显示所选项目的图像，用户也可以根据需要 resize/drag/drop 该图像。现在我可以用这段代码让它只工作一次

addAction(selectedAction: any) {
  var canvas = new fabric.Canvas('c');
  var imgObj = new Image();
  imgObj.src = selectedAction.image;
  imgObj.onload = function() {
    var imgInstance = new fabric.Image(imgObj, {
        left: 200,
        top: 200,
      });
    canvas.add(imgInstance);
  }

问题是当用户单击菜单中的另一个项目时，canvas 上的前一个项目消失，而当前项目显示在 canvas 上。但是如果我点击那张图片，它就会消失，之前的图片会显示在 canvas.

我希望他们同时留在 canvas 上。请指教

Answer 1

真正的快速回答：http://jsfiddle.net/8yf15nqp/1/。

var canvas = ...// setup canvas

function addImage (url) {
    fabric.Image.fromURL(url, function (img) {
        // deal with image
       canvas.add(img);
    });
}

设置一个函数来处理添加，然后在您要添加新图像时调用它。我假设您希望将 url 传递给函数并执行其他操作，但这是一个精简的示例。

如何使用 fabricjs 将多个图像添加到 canvas

How to add multiple image to canvas using fabricjs

html

javascript

canvas

image

fabricjs