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

我已阅读关于此主题的几个问题/答案，但似乎无法找到我的解决方案。非常抱歉，如果你们发现这个问题重复。如何使用fabricjs将多个图像添加到画布

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

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

问题是，当用户点击菜单中的另一个项目，这是在画布上的上一个项目消失了，而不是现在的项目显示在画布上。但是，如果我点击该图像，它将会消失，并且之前的图像显示在画布上。

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

来源

2016-12-24 Sleepz

每次调用此函数时，您似乎都在重新创建画布。尝试外化，然后调用canvas.remove，而不是摆脱以前的形象。 – Ben

感谢您的回答，但您能否给我一个示例代码？我对这些画布很感兴趣。 – Sleepz

真正快速的回答：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传递给函数并做其他的事情，但是这是一个相当简单的例子。

来源

2016-12-25 05:28:23 Ben

这正是解决方案！非常感谢你。 – Sleepz

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

回答

相关问题