javascript - FabricJS - 传递附加数据或从 Fabric.loadSVGFromString 获取 id

Question

我有一个要渲染的对象数组。我想将附加数据传递给 SVG 解析器，这样我就可以在悬停时显示标题等。 - 一般情况下识别 svg 对象。我的代码:

for ( var i = 0; i < response.data.items.length; i++) {

    var currItem = response.data.items[i];      
    fabric.loadSVGFromString(currItem.content, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);
        obj.tooltip = currItem.tooltip;
        canvas.add(obj);
        canvas.moveTo(obj, 3);
        canvas.calcOffset();
        canvas.renderAll();
    });

}

由于 loadSVGFromString 是异步的(我认为)，currItem 中的数据变化速度更快，导致工具提示值无效。

我需要一个解决方案，以便我可以识别创建的对象并以任何方式将其与数据链接(从 svgObject 获取 id 或将数据传递给解析器)

任何帮助将不胜感激!

Answer 1

请尝试一下 enlivenObjects() 函数，就像这样(来 self 的网络应用程序的片段)，这里我从数据库获取我的对象(svg 和自定义对象)，并将它们添加一个 Canvas 上的一张:

 result.data.forEach(function (object) {
                                var tmpObject = JSON.parse(object.table_data);
                                console.log("obj id:",tmpObject.objectId);
                                fabric.util.enlivenObjects([tmpObject], function (objects) {
                                    var origRenderOnAddRemove = canvas.renderOnAddRemove;
                                    canvas.renderOnAddRemove = false;
                                    console.log(objects);
                                    objects.forEach(function (o) {
                                        //custom objects & svgobjects go to background
                                        if (o.typeTable == 'svgObject' || o.typeTable == 'customText' || o.typeTable == 'customRect' || o.typeTable == 'customCircle' || o.typeTable == 'customPolygon' || o.typeTable == 'customLine') {
                                            canvas.add(o);
                                            canvas.sendToBack(o);//send svg στο background
                                        } else {
                                            canvas.add(o);
                                        }
                                        //console.log(o);
                                    });

                                    canvas.renderOnAddRemove = origRenderOnAddRemove;
                                    canvas.renderAll();
                                });
                            });