522662_es-ES

liliconcom

Hacer curvas Bézier usando cadenas de ruta SVG

Tengo dos rutas SVG que están construidas de la misma manera.

 

a = "M 10 60 C 20 80 40 80 50 60";
b = "M 0 -150 C 82.8 -150 150 -82.8 150 0";

Una gráfica rápida de 'a' muestra el siguiente arco

 

New Window( "JMP 8PFU Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(a, 0);
 );
);

Sin embargo, cuando intento trazar 'b' aparece un error

 

DisplayBox[EvalContextBox]
argument value is invalid in access or evaluation of 'Path' , Bad Argument( b ), Path/*###*/(b, 0)

New Window( "JMP 8PFU Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(combined, 0);
 );
);

Si agrego un carácter 'z' de 'cierre' en la curva, dibuja el segmento y devuelve la 'línea' al punto de origen. Esto funciona pero no es lo que quiero: solo quiero el arco.

 

b = "M 0 -150 C 82.8 -150 150 -82.8 150 0 z";

Mi objetivo final es combinar 4 arcos para aproximar un círculo.

 

tr = "M 0  150 C  82.8  150  150  82.8  150 0 z";
br = "M 0 -150 C  82.8 -150  150 -82.8  150 0 z";
bl = "M 0 -150 C -82.8 -150 -150 -82.8 -150 0 z";
tl = "M 0  150 C -82.8  150 -150  82.8 -150 0 z";

combined = "M 0  150 C  82.8  150  150  82.8  150 0 z M 0 -150 C  82.8 -150  150 -82.8  150 0 z M 0 -150 C -82.8 -150 -150 -82.8 -150 0 z M 0  150 C -82.8  150 -150  82.8 -150 0 z";

New Window( "JMP 8PFU Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(combined, 0);
 );
);

 

Nuevamente, cuando elimino el carácter 'z' aparece el mismo error.

 

 

Para completar, probé esta cadena combinada en un navegador web sin los caracteres 'z' y se representó correctamente.

 

< svg vercuadro = "-175 -175 350 350" estilo = "borde: verde sólido;" >

< camino identificación = "Wrf_Edge" ataque = "negro" llenar = "ninguno" anchura del trazo = "1" d = "M 0 150 C 82,8 150 150 82,8 150 0 M 0 -150 C 82,8 -150 150 -82,8 150 0 M 0 -150 C -82,8 -150 -150 -82,8 -150 0 M 0 150 C -82,8 150 -150 82. 8 -150 0" />

svg >

 

 

 

 

 

Ingeniería de Calidad y ProcesosRe: Hacer curvas Bézier usando cadenas de ruta SVG

No, Jarmo, no utilicé eval/insert. Lo intentaré más tarde cuando tenga un minuto.

 

Además, no necesité hacer cuatro arcos de Bézier para generar un círculo. SVG tiene una etiqueta 'A' (Arco) que puede dibujar una con muchos menos caracteres... y es mucho más fácil de comprender ya que no necesita generar ningún 'punto de control' de Bézier.

 

Sin embargo, necesitaba agregar el 'doble 0' al final de la cadena para que funcionara como en el otro ejemplo anterior.

 

"M -150 0 a 150 150 0 1 0 300 0 a 150 150 0 1 0 -300 00"

Comparando SVG ARC, SVG Bezier Curves y la función nativa 'Círculo' en JMP, todas se aproximan bastante bien.

circleArcSyntax = "M -150 0 a 150 150 0 1 0 300 0 a 150 150 0 1 0 -300 00";
circleCurveSyntax = "M 0  150 C  82.8  150  150  82.8  150 00 M 0 -150 C  82.8 -150  150 -82.8  150 00 M 0 -150 C -82.8 -150 -150 -82.8 -150 00 M 0  150 C -82.8  150 -150  82.8 -150 00";
New Window( "JMP Circle Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  
  penSize(20);
  penColor("yellow");
  path(circleArcSyntax, 0);
  
  penColor("red");
  penSize(10);
  path(circleCurveSyntax, 0);
  
  penSize(2);
  penColor("black");
  circle({0,0}, 150);
 );
);

Arco SVG = Amarillo

Curva Bézier de 4 segmentos SVG = Rojo

Función JMP 'Círculo' = Negro.

 

 

Re: Hacer curvas Bézier usando cadenas de ruta SVG

Puedo confirmar que también falla en JMP14.Una cosa que puedes hacer es construir las curvas de Bézier de atrás hacia adelante como se muestra a continuación (solo requiere un comando MOVER, ya que el punto final de cada C es el punto inicial de la siguiente)

 

circle = "M 0,150 C 82.8,150  150,82.8  150,0 C 150,-82.8 82.8,-150 0,-150 C -82.8,-150 -150,-82.8 -150,0 C -150,82.8 -82.8,150 0,150 z";

New Window( "JMP Layout Example",
 Graph Box(
  frameSize( 500, 500 ), 
  xScale(-175,175),
  yScale(-175,175),
  penColor("blue");
  penSize(2);
  path(circle , 0);
 );
);

Re: Hacer curvas Bézier usando cadenas de ruta SVG

Hmmm, parece que a JMP (solo probado en 15.2.0) no le gusta el último carácter si es un '0'. Si lo configuro en otro valor o lo doblo en el '0' convirtiéndolo en '00', entonces funciona bien. entonces la cadena:

 

" M 0 150 C 82,8 150 150 82,8 150 0 "

se convierte

"M 0 150 C 82,8 150 150 82,8 150 00"

</CODE></P><P>&nbsp;</P><PRE><CODE class=" language-jsl">circle = "M 0 150 C 82.8 150 150 82.8 150 00 M 0 -150 C 82.8 -150 150 -82.8 150 00 M 0 -150 C -82.8 -150 -150 -82.8 -150 00 M 0 150 C -82.8 150 -150 82.8 -150 00"; New Window( "JMP Layout Example", Graph Box( frameSize( 500, 500 ), xScale(-175,175), yScale(-175,175), penColor("blue"); penSize(2); path(circle, 0); ); );

 

 

Re: Hacer curvas Bézier usando cadenas de ruta SVG

Lo intenté también con la cadena combinada (copiada y pegada del fragmento del navegador), funcionó bien:

Names Default To Here(1);


New Window("JMP 8PFU Layout Example",
 Graph Box(
  frameSize(500, 500),
  X Scale(-175, 175),
  Y Scale(-175, 175),
  Pen Size(2);
  Pen Color("blue");
  Path("M 0  150 C  82.8  150  150  82.8  150 0 M 0 -150 C  82.8 -150  150 -82.8  150 0 M 0 -150 C -82.8 -150 -150 -82.8 -150 0 M 0  150 C -82.8  150 -150  82.8 -150 0", 0);
 )
);

 

¿Has intentado modificar la parte Personalizar del cuadro de gráficos? O tal vez usar Eval Insert para agregar la cadena a Path() (aunque no estoy seguro de por qué sería necesario...)

 

Re: Hacer curvas Bézier usando cadenas de ruta SVG

Eso es raro Jarmo. Estoy usando 15.2.0. ¿Lo intentaste usando la cuerda combinada?

En última instancia, crearé muchas cadenas SVG y las guardaré en una tabla DB para que las utilicen los desarrolladores de aplicaciones. Por cierto, este círculo representa la circunferencia de una oblea. Como resultado, solo necesito una cadena que funcione para todos los entornos de desarrollo. Para aplicaciones JMP no quiero usar cuatro arcos distintos, sino solo una cadena para evitar la duplicación en la base de datos.

 

Espero que esto tenga sentido.

 

Por cierto, literalmente reinicié JMP y copié/pegué su código en un script sin modificaciones y todavía crea este error. Probaré con otra versión de JMP.

 

 

 

 

Re: Hacer curvas Bézier usando cadenas de ruta SVG

Para mí, esto parece funcionar bien, usando JMP16.2 Pro y Windows 10 (¿versión relacionada?)

Names Default To Here(1);

tr = "M 0  150 C  82.8  150  150  82.8  150 0";
br = "M 0 -150 C  82.8 -150  150 -82.8  150 0";
bl = "M 0 -150 C -82.8 -150 -150 -82.8 -150 0";
tl = "M 0  150 C -82.8  150 -150  82.8 -150 0";

New Window("JMP 8PFU Layout Example",
 Graph Box(
  frameSize(500, 500),
  X Scale(-175, 175),
  Y Scale(-175, 175),
  Pen Size(2);
  Pen Color("blue");
  Path(tr, 0);
  Pen Color("red");
  Path(br, 0);
  Pen Color("green");
  Path(tl, 0);
  Pen Color("red");
  Path(bl, 0);
 )
);

 

(con Graph Box usaría Eval Insert para que Personalizar muestre la información correcta en el menú contextual)