带有 svg 自定义属性的 fabric.js 画布到 json答案

【问题标题】：fabric.js canvas to json with svg custom attributes带有 svg 自定义属性的 fabric.js 画布到 json
【发布时间】：2023-03-12 01:31:01
【问题描述】：

我为路径 svg 添加了新属性：

   var canvas = new fabric.Canvas('c');
   var group = [];


fabric.loadSVGFromURL(svg_file, function(objects,options) {
            var obj = fabric.util.groupSVGElements(objects, options);
            obj.set({
                left: 100,
                top: 100
            });
            canvas.add(obj);
            canvas.renderAll();

        },
        // add new attributes
        function(item, object) {
            object.set('id',item.getAttribute('id'));
            object.set('tag_id', tag_id);
            object.set('elem_id', elem_id );
            group.push(object);
        }
);

还有：

// see new attributes
console.log(canvas.getObjects());
// save to JSON
console.log('json:', canvas.toJSON())

但新属性不保存。 Saving JSON in canvas with fabric.js 不适合我。

我读了Saving JSON in canvas with fabric.js，
它说要基于fabric.Image创建一个新类，它对我有用，但是如何处理fabric.LoadSVGFromURL 和fabric.util.groupSVGElements？需要创建一个新类或其他东西吗？帮帮我。

已解决：

https://github.com/kangax/fabric.js/issues/471

http://jsfiddle.net/Ypn2k/4/

【问题讨论】：

标签： fabricjs

【解决方案1】：

您应该尝试以这种方式设置自定义属性：

svgelement.toObject = (function (toObject) {
                            return function () {
                                return fabric.util.object.extend(toObject.call(this), {
                                    "custom_attr_key": "Value",
                                    "custom_attr_key": "Value",
                                });
                            };
                        })(svgelement.toObject);

并在 toJson 函数中传递这个自定义属性键，如下所示：

canvas.toJSON(['custom_attr_key','custom_attr_key']);

【讨论】：