2

我正在将我的应用程序中的 fabricjs 从版本 1.7.22 升级到 2.2.1。

我主要使用在 Illustrator 中创建的 SVG 对象。然后在应用程序中，我正在处理 SVG 对象中的路径。

在 v1.7.22 中，svg 路径将位于每个对象的“路径”属性下......

在此处输入图像描述

现在有了 2.2.1，我看到 'paths' 消失了，并且有一个 '_objects' 属性。

在此处输入图像描述

这一切都很好。

我的问题是 '_objects' 属性仅在 SVG 对象上有超过 1 个路径时才存在，否则，我看不到 SVG 路径的存储位置。

所以如果是这样的话...

在此处输入图像描述

...然后 '_objects' 属性存在。但如果是这样的话...

在此处输入图像描述

..那么没有'_objects'属性。

那么如果有一个只有一条路径的 SVG 对象，那么该路径存储在织物对象中的什么位置呢？

4

1 回答 1

2

正如文档groupSVGElements中提到的，它返回一个 fabric.Object（如果 svg 包含一个路径）/ fabric.Group（如果 svg 包含多个路径）。

并在更改日志 fabric.PathGroup中声明已被删除。

如果它包含多个路径，则创建一个fabric.Group包含所有 的对象Path objects，否则只返回路径对象。

要获取路径，请使用object.path.

演示

var canvas = new fabric.Canvas('c');
var svg = '<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 375 200" enable-background="new 0 0 400.5 477" xml:space="preserve"> <path d="M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0"/><path d="M250 0 L175 200 L325 200 Z" /> </svg>';

fabric.loadSVGFromString(svg, function(objects, options) {
  var shape = fabric.util.groupSVGElements(objects, options);
  console.log(shape.type)
  if(shape.type == 'group'){
   shape.forEachObject(function(obj){
    console.log(obj.path)
   })
  }
  else if(shape.type == 'path'){
    console.log(shape.path)
  }
  
  canvas.add(shape);
  document.getElementById('label').innerHTML = "Object is " + shape.type ;

});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<label id="label"></label>
<canvas id="c" height=300 width=400 style="border:1px solid #ccc"></canvas>

于 2018-03-30T09:52:50.237 回答