Question

我为路径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/

Answer 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']);

使用svg自定义属性的fabric.js canvas到json

1 个答案: