恢复 Javascript Path2D 的元素

Question

我想检查 Path2D 对象的各个路径段。例如，假设

path = new Path2D();
path.ellipse(70,90,2,2,0,0,2*Math.PI);

我想将 path 传递给其他函数并提取 Path2D 的元素，以便将它们转换为另一种格式。总体目标是允许用户创建路径并将其转换为 TikZ 以包含在 LaTeX 文档中。

是否有类似 Java 的 Shape.getPathIterator() 的东西，它允许检查路径上的每个段。这可以用 Java 脚本完成吗？作为模板，这里是 Java 代码的大纲，它执行我希望在 Java 脚本中执行的操作。

PathIterator p = path.getPathIterator(new AffineTransform());
while (p.isDone() == false)
  {
    double c = new double[6];
    int t = p.currentSegment(c);
    if (t == PathIterator.SEG_MOVETO)
      // (c[0],c[1]) is the "move-to" point.
    else if (t == PathIterator.SEG_LINETO)
      // (c[0],c[1]) is the "line-to" point.
    else if (t == == PathIterator.SEG_CUBICTO)
      // c[0] through c[5] specify the cubic curve
    else
      // etc., etc.
  }

看到@Kaiido 的回答后正在编辑。 我最终做的是将 Path2D 扩展到功能相同的新 class，除了它将对 arc()、lineTo() 等的每次调用存储到一个数组中通话结束。这使我可以检查过去通话的记录。对于每个人来说，它可能不是一个足够通用的解决方案，但它可以满足我的需要。

Answer 1

不，目前 API 中没有任何内容允许我们这样做。
有 some discussions 扩展 Path2D API 所以它不那么“不透明”，但还没有具体的东西，我认为没有人在积极地致力于它，我们不能确定它会是什么包括。
当前提案内容为

Path2D Inspection. Allow inspection of Path2D objects, that are currently opaque.

尽管如此，我自己几个月前就开始研究这个想法，希望我能通过可能的功能设计以某种方式帮助这个讨论开始。
我非常雄心勃勃的想法是带来像 SVG 的 SVGPathData 一样的 API 并向 Path2D 添加方法，例如 getBBox、getPathData()、setPathData()、toSVGString()、 getTotalLength()，或getPointAtLength()。

您可以检查 this repository 我的项目在哪里，下面是使用您的输入的演示。

const path = new Path2D();
path.ellipse(70,90,50,20,0,0,2*Math.PI);

const svgString = path.toSVGString();
document.querySelector("pre").textContent += svgString;
document.querySelector("path").setAttribute("d", svgString);
document.querySelector("canvas").getContext("2d").fill(path);

<script src="https://cdn.jsdelivr.net/gh/Kaiido/path2D-inspection@master/build/path2D-inspection.min.js"></script>
<pre>
const path = new Path2D();
path.ellipse(70,90,50,20,0,0,2*Math.PI);
path.toSVGString();

</pre>
SVG:<br>
<svg><path fill="green"></path></svg><br>
Canvas:<br>
<canvas></canvas>

恢复 Javascript Path2D 的元素

Recovering elements of a Javascript Path2D

javascript

svg

html5-canvas

path-2d