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

Question

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

这是我的情况；假设我有一个菜单供用户单击它，它将在画布上显示所选项目的图像，用户还可以根据需要调整/拖放该图像。现在我只能用这段代码让它工作一次

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

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

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

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 传递给函数并执行其他操作，但这是一个非常精简的示例。