javascript - Fabric.js 导出为 svg 时出现圆圈问题

Question

导入圆形对象然后导出到 svg 时，它们会变成不可见路径。我做错了什么或者是一个错误吗？

  <path d="M 90 0 A 90 90 0 0 1 90 1.256933281983528e-12" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(1329.1 559.64) "/>

查看 fiddle 示例单击导出并查看手动添加的 svg 是否正确 <circle /> http://jsfiddle.net/nwkdzss2/

Answer 1

这是一个舍入问题。您那里有这些参数:

  "startAngle":0,
  "endAngle":6.2831853071796,

它们被解释为大于 2π，并且由于某种原因，这会将大 Angular 标志(A 之后的第四个数字)翻转为 false，并且只有两点之间的“短路径”绘制为:

d="M 90 0 A 90 90 0 0 1 90 1.256933281983528e-12"

如果您使用稍小的数字 2π，

  "startAngle":0,
  "endAngle":6.2831853,

路径数据被解释为使用“长途”。

d="M 90 0 A 90 90 0 1 1 90 -6.461627453714901e-7"

完全关闭这些参数将绘制一个圆形图元。