Quiero examinar los segmentos de ruta individuales de un objeto Path2D. Por ejemplo, supongamos que
path = new Path2D(); path.ellipse(70,90,2,2,0,0,2*Math.PI); Quiero pasar la path a alguna otra función y extraer los elementos de Path2D para que puedan traducirse a otro formato. El objetivo general es permitir que el usuario cree una ruta y la traduzca a TikZ para incluirla en un documento LaTeX.
¿Hay algo como Shape.getPathIterator() de Java, que permite examinar cada segmento a lo largo de una ruta? ¿Se puede hacer esto Javascript? Como plantilla, aquí hay un resumen del código Java que hace lo que espero hacer en Javascript.
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. } Editando esto después de ver la respuesta de @Kaiido. Lo que terminé haciendo fue extender Path2D a una nueva clase que es funcionalmente idéntica, excepto que almacena cada llamada a arc() , lineTo() , etc. en una matriz a medida que se realiza la llamada. Esto me permite examinar el registro de llamadas anteriores. Puede que no sea una solución suficientemente general para todos, pero funciona para mis necesidades.
No, actualmente no hay nada en la API que nos permita hacer eso.
Hay algunas discusiones para ampliar la API de Path2D para que sea menos "opaca", pero nada tangible todavía, no creo que nadie esté trabajando activamente en ello, y no podemos estar seguros de qué incluirá.
La propuesta actual dice
Inspección Path2D. Permitir la inspección de objetos Path2D, que actualmente son opacos.
Por si sirve de algo, yo mismo comencé a trabajar en esta idea hace unos meses, con la esperanza de poder ayudar a que esta discusión comenzara de alguna manera con un posible diseño de características.
Mi idea muy ambiciosa es traer una API como SVGPathData de SVG y agregar métodos a Path2D como getBBox , getPathData() , setPathData() , toSVGString() , getTotalLength() o getPointAtLength() .
Puede consultar este repositorio donde vive mi proyecto, y a continuación hay una demostración con su entrada.
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>