如何从Fabric JS中的path-group对象获取路径

时间：2017-11-28 16:49:28

标签： canvas svg fabricjs

我在画布上加载了多个对象，还加载了SVG苍蝇，并以JSON格式保存了数据库中的画布结构。再次从JSON数据加载画布，我们获取每个对象并在画布上加载一个。如果是路径组类型对象，我们如何从路径组类型对象获取SVG文件的路径。

以下是我们从JSON格式的数据库中获取的对象列表： - 

(8) [i, i, i, i, i, i, i, i]
0: i {type: "line", originX: "left", originY: "top", left: 500, top: 5, …}
1: i {styles: {…}, text: "{{Full Name}}↵{{User License}} | {{Company Title}}…
↵{{Mailing Address1}}↵{{City}}, {{State}} {{Zip}}", __skipDimension: false, 
type: "textbox", originX: "left", …}
2: i {styles: {…}, text: "{{Company License}}", __skipDimension: false, type: 
"textbox", originX: "left", …}
3: i {filters: Array(0), resizeFilters: Array(0), type: "image", originX: 
"left", originY: "top", …}
4: i {filters: Array(0), resizeFilters: Array(0), type: "image", originX: 
"left", originY: "top", …}
5: i {filters: Array(0), resizeFilters: Array(0), type: "image", originX: 
"left", originY: "top", …}
6: i {filters: Array(0), resizeFilters: Array(0), type: "image", originX: 
"left", originY: "top", …}
7: i {paths: Array(8), type: "path-group", originX: "left", originY: "top", 
left: 240, …}

以下是Path-group类型对象的JSON文件。

＆＃13;
＆＃13; 
{  
   "type":"path-group",
   "originX":"left",
   "originY":"top",
   "left":240,
   "top":110,
   "width":512,
   "height":512,
   "fill":"",
   "stroke":null,
   "strokeWidth":1,
   "strokeDashArray":null,
   "strokeLineCap":"butt",
   "strokeLineJoin":"miter",
   "strokeMiterLimit":10,
   "scaleX":0.11,
   "scaleY":0.11,
   "angle":2.79,
   "flipX":false,
   "flipY":false,
   "opacity":1,
   "shadow":null,
   "visible":true,
   "clipTo":null,
   "backgroundColor":"",
   "fillRule":"nonzero",
   "globalCompositeOperation":"source-over",
   "transformMatrix":null,
   "skewX":0,
   "skewY":0,
   "paths":[  
      {  
         "type":"path",
         "originX":"left",
         "originY":"top",
         "left":0,
         "top":0,
         "width":512,
         "height":322.99,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0,
         "path":[  
            [  
               "M",
               76.573,
               260.63
            ],
            [  
               "V",
               62.998
            ],
            [  
               "C",
               76.573,
               44.803,
               91.376,
               30,
               109.571,
               30
            ],
            [  
               "c",
               17.623,
               0,
               32.063,
               13.887,
               32.953,
               31.293
            ],
            [  
               "h",
               -17.956
            ],
            [  
               "v",
               30
            ],
            [  
               "h",
               66
            ],
            [  
               "v",
               -30
            ],
            [  
               "h",
               -18.043
            ],
            [  
               "C",
               171.616,
               27.343,
               143.736,
               0,
               109.571,
               0
            ],
            [  
               "C",
               74.834,
               0,
               46.573,
               28.261,
               46.573,
               62.998
            ],
            [  
               "V",
               260.63
            ],
            [  
               "H",
               0
            ],
            [  
               "v",
               62.36
            ],
            [  
               "h",
               512
            ],
            [  
               "v",
               -62.36
            ],
            [  
               "H",
               76.573
            ],
            [  
               "z"
            ]
         ]
      },
      {  
         "type":"path",
         "originX":"left",
         "originY":"top",
         "left":19.765,
         "top":352.98999999999995,
         "width":472.47,
         "height":159.01,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0,
         "path":[  
            [  
               "M",
               19.765,
               352.99
            ],
            [  
               "v",
               63.73
            ],
            [  
               "c",
               0,
               40.318,
               31.857,
               73.327,
               71.705,
               75.19
            ],
            [  
               "V",
               512
            ],
            [  
               "h",
               30
            ],
            [  
               "v",
               -20
            ],
            [  
               "H",
               390.9
            ],
            [  
               "v",
               20
            ],
            [  
               "h",
               30
            ],
            [  
               "v",
               -20.1
            ],
            [  
               "c",
               39.688,
               -2.063,
               71.335,
               -34.991,
               71.335,
               -75.18
            ],
            [  
               "v",
               -63.73
            ],
            [  
               "H",
               19.765
            ],
            [  
               "z"
            ]
         ]
      },
      {  
         "type":"rect",
         "originX":"left",
         "originY":"top",
         "left":142.57,
         "top":122,
         "width":30,
         "height":35,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0
      },
      {  
         "type":"rect",
         "originX":"left",
         "originY":"top",
         "left":142.57,
         "top":178,
         "width":30,
         "height":35,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0
      },
      {  
         "type":"rect",
         "originX":"left",
         "originY":"top",
         "left":96.57,
         "top":122,
         "width":30,
         "height":35,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0
      },
      {  
         "type":"rect",
         "originX":"left",
         "originY":"top",
         "left":96.57,
         "top":178,
         "width":30,
         "height":35,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0
      },
      {  
         "type":"rect",
         "originX":"left",
         "originY":"top",
         "left":188.67,
         "top":122,
         "width":30,
         "height":35,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0
      },
      {  
         "type":"rect",
         "originX":"left",
         "originY":"top",
         "left":188.67,
         "top":178,
         "width":30,
         "height":35,
         "fill":"rgb(0,0,0)",
         "stroke":null,
         "strokeWidth":1,
         "strokeDashArray":null,
         "strokeLineCap":"butt",
         "strokeLineJoin":"miter",
         "strokeMiterLimit":10,
         "scaleX":1,
         "scaleY":1,
         "angle":0,
         "flipX":false,
         "flipY":false,
         "opacity":1,
         "shadow":null,
         "visible":true,
         "clipTo":null,
         "backgroundColor":"",
         "fillRule":"nonzero",
         "globalCompositeOperation":"source-over",
         "transformMatrix":[  
            1,
            0,
            0,
            1,
            0,
            0
         ],
         "skewX":0,
         "skewY":0
      }
   ]
}
＆＃13;
＆＃13;
＆＃13;

我想知道我们如何从路径组对象获取SVG文件的路径。 路径组对象包含内部和内部路径。

0 个答案:

没有答案
相关问题
最新问题