javascript - Fabric.js : Is there any issue for creating multiple objects using only one variable?

Question

• 我为什么要质疑这个？

因为，从我的代码中，我希望用户创建无限的图像，因此必须以更短的方式创建它们，例如对所有图像使用一个变量。

这是我在用户添加图像时调用的函数中的代码:

(已编辑:此代码现已修复。)

function addImage(){
    var imageAdded = new Image();
    imageAdded.onload = function (img) {
    var imgAdded = new fabric.Image(imageAdded, {
        clipName: picID,
        clipTo: function (ctx) {
            return _.bind(clipByName, imgAdded)(ctx)
        }
    });
    canvas.add(imgAdded);
    };
    var n = 0;
    if(n == 0){
        n = 1;
        addEventListenerFabric();
    }
}
function addEventListenerFabric(){
    canvas.on("object:selected", function (e) {
        alert(e.target.clipName + " is selected"); // fixed
        canvas.renderAll();
    });
}

• 我的代码有什么问题？

我的代码将根据图像的数量发出警报。例如，如果用户创建了 3 张图片，则当他选择一张图片时，系统会提醒 3 次。 是因为使用一个变量来代替所有变量吗？(也许我的代码根本就是错误的，请重新检查)

• 如果不可能将一个变量用于所有变量或者您有更好的解决方案。我非常有兴趣看到您的评论。

谢谢您的建议!

Answer 1

发生这种情况是因为您在每次加载图像时将 object:selected 绑定(bind)到 Canvas 。只需将其从 onload 函数中移出，它只会触发一次。