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