从 Fabric.js 中的 JSON 加载加载默认属性

Posted 2023-03-25

【中文标题】从 Fabric.js 中的 JSON 加载加载默认属性

【英文标题】：Load from JSON in Fabric.js loading default properties

【发布时间】：2013-10-27 00:15:49

【问题描述】：

我的画布包含带有centeredRotation:true 的对象和带有selectable:false 的其他对象 当我将此画布转换为 JSON 并重新加载它时。这些对象具有它们的默认属性。 即没有中心旋转和对象是可选择的。 我可以知道为什么会这样吗？ 显然 JSON 中不包含 centeredRotation、selectable 等属性。

"type":"rect","originX":"left","originY":"top","left":92,"top":53,"width":150,"height": 150,"fill":"#778899","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10 ,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"不透明度":0.4,"shadow":null,"visible":true," clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0],"background":""

如何在加载对象时设置这些？

【问题讨论】：

以上json无效

我刚刚提到了对这个问题有用的json部分

【参考方案1】：

您需要在toJSON 期间包含它们：

canvas.toJSON([ 'centeredRotation', 'selectable' ]);

参见documentation for toJSON，它描述了这个“propertiesToInclude”参数并提供了一些示例。

【参考方案2】：

您也可以在创建新对象之前在主对象上指定此项。这保证了我下次从 json 加载对象时，可选择项将保存在“toObject”/“toJSON”函数中。

// Add 'selectable' to every object via the main class "Object"
fabric.Object.prototype.toObject = (function (toObject) 
    return function () 
        return fabric.util.object.extend(toObject.call(this), 
            selectable: this.selectable
        );
    ;
)(fabric.Object.prototype.toObject);

我不明白为什么默认情况下它不存在，但我想这是因为它更像是一种状态而不是一种属性？