还有另一种方法可以从 Fabric JS 获取 JSON 中存在的 Circle 对象吗？

Posted 2023-03-25

【中文标题】还有另一种方法可以从 Fabric JS 获取 JSON 中存在的 Circle 对象吗？

【英文标题】：Is there another way to fetch the Circle object present in a JSON from Fabric JS?

【发布时间】：2020-01-24 17:26:50

【问题描述】：

我正在尝试使用 FabricJS 从画布中获取 JSON，它正在正确获取图像类型、矩形类型，问题似乎只发生在圆圈中。

圆圈似乎断开了，如控件所示，但笔划不可见。

我在下面发布我的 JSON

"version": "3.4.0", "objects": [ "type": "image", "version": "3.4.0", "originX": "left", "originY": "top", "left": 0, "top": 40, "width": 1200, "height": 800, "fill": "rgb(0,0,0)", "stroke": null, "strokeWidth": 0, "strokeDashArray": null, "strokeLineCap": "butt", "strokeDashOffset": 0, "strokeLineJoin": "miter", "strokeMiterLimit": 4, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "paintFirst": "fill", "globalCompositeOperation": "source-over", "transformMatrix": null, "skewX": 0, "skewY": 0, "id": 0, "selectable": false, "src": "http://126.0.0.122/airlift/upload/inspection/4/AP00004-0-Eksempelbilde%205%20Helikopter-1200x900.JPG", "filters": [] , "type": "circle", "version": "3.4.0", "originX": "left", "originY": "top", "left": 509, "top": 361, "width": 60, "height": 60, "fill": "", "stroke": "#fced7e", "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt", "strokeDashOffset": 0, "strokeLineJoin": "miter", "strokeMiterLimit": 4, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "paintFirst": "fill", "globalCompositeOperation": "source-over", "transformMatrix": null, "skewX": 0, "skewY": 0, "id": "1", "selectable": true ]

当我使用loadFromJSON 时会出现此问题，似乎只保留了矩形和图像。

我正在尝试向对象添加一个数字，在下面添加 sn-p

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) 
  //console.log("Object: ", object[o]);
  if(object.id > 0)
    t = new fabric.Text(String(object.id), 
      left: parseInt(object.left) - 15,
      top: parseInt(object.top) - 15,
      fill: object.stroke,
      originX: object.originX,
      originY: object.originY,
      fontSize: 15
    );        
    canvas.add(t);
  
);

object.id 是一个预定义的 ID，用于保存我要添加文本的号码

添加图片以供参考。

之前

之后

【问题讨论】：

您使用的是哪个版本的fabricjs？在圆形对象中，缺少半径，这就是它无法绘制的原因。

感谢您的回复，Durga 让我检查一下半径。 FabricJS 版本是 3.4.0

@Durga 添加半径后它有所帮助。非常感谢您的帮助

你是手动添加的吗？？

不，我使用了toObject() 函数，无论如何我都是在单击按钮时添加它的。它显示唯一的问题是保存到 json 并将其取回，这可能是你提到的半径的原因。

【参考方案1】：

您可以扩展结构 toObject() 方法以包含自定义属性。由于加载的 json 缺少您可以执行的半径：

fabric.Object.prototype.toObject = (function (toObject) 
            return function () 
                return fabric.util.object.extend(toObject.call(this), 
                    radius: this.radius || null
                );
            ;
        )(fabric.Object.prototype.toObject);

您还可以包含椭圆的半长和短半径：

fabric.Object.prototype.toObject = (function (toObject) 
            return function () 
                return fabric.util.object.extend(toObject.call(this), 
                    radius: this.radius || null,
                    rx: this.rx || null,
                    ry: this.ry || null
                );
            ;
        )(fabric.Object.prototype.toObject);

在您的代码之前进行设置。