⇪

Trazados SVG en canvas

facebook-svg gplus-svg twitter-svg

¡OJO! Path2D es todavía una tecnología experimental y no funciona en todos los navegadores, notablemente en IE. Sin embargo sí funciona en Google Chrome, Firefox, Opera y Safari.

Podemos fácilmente utilizar trazados SVG en <canvas> utilizando el nuevo Path2D API. Pero primero veamos, en pocas palabras, que son los trazados SVG

Trazados  SVG

En SVG el elemento <path> se utiliza para dibujar formas complejas, una combinación de líneas, arcos y curvas Bézier y tiene mas o menos este aspecto:

<path 
  fill="#FFFFFF" 
  stroke="#ED1D24" 
  stroke-width="2" 
  d="M376.349,171.58. . . . . . 
/>

Donde fill es el color de relleno,  stroke representa el color del trazado mientras que el atributo stroke-width define el grosor de línea. Finalmente el atributo d define el trazado a seguir, en este caso una manzana.

Lea más acerca de trazados SVG

See the Pen Manzana svg by Gabi (@enxaneta) on CodePen.

Utilizar trazados SVG en canvas

El método Path2D() es un constructor que devuelve un nuevo trazado. En el siguiente ejemplo Path2D() utiliza como argumento el valor del atributo d de un trazado SVG.

var svgPathManzana="M376.349,171.58 . . . . .";
var Manzana = new Path2D(svgPathManzana);
ctx.stroke(Manzana);

Así de sencillo! Observe por favor que el método stroke() también toma como argumento al nuevo trazado.

Detectar si un punto se encuentra dentro del trazado

El método isPointInPath() detecta si un punto cuyas coordenadas son x e y se encuentra dentro de un trazado dado. Si trabajamos con trazados generados con el método Path2D(), podemos especificar como argumento el trazado al cual nos referimos. Por ejemplo si queremos comprobar si el punto cuyas coordenadas son x:250, y: 250 se encuentra dentro de la Manzana podemos escribir:

if(ctx.isPointInPath(Manzana,250, 250)){
  ctx.arc(250,250,3,0,2*Math.PI);
  ctx.fill();
}

var svgPathManzana="M376.349,171.58 c0,0-37.276,22.484-36.094,60.946s31.438,61.577,42.012,63.313c4.127,0.678-24.314,57.988-42.039,72.189 s-36.067,17.159-64.47,5.917c-28.403-11.242-48.521,0.724-65.089,6.871s-36.687-0.361-63.905-39.415 s-57.396-129.585-15.976-173.964s87.574-26.627,100-20.71s34.32,5.325,59.172-5.917S363.922,153.237,376.349,171.58z";
var svgPathHoja ="M311.852,68.621c0,0,2.367,14.793-3.55,27.219 s-28.189,55.061-60.473,47.337c-0.809-0.193-5.529-14.482,1.398-29.002C259.004,93.682,284.49,70.699,311.852,68.621z";

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 500;
var ch = c.height = 500;

var Manzana = new Path2D(svgPathManzana);
var Hoja = new Path2D(svgPathHoja);

ctx.fillStyle = "red";
if(ctx.isPointInPath(Manzana,250, 250)){
	ctx.arc(250,250,3,0,2*Math.PI);
	ctx.fill();
};

ctx.stroke(Manzana);
ctx.fillStyle = "#6ab150";
ctx.fill(Hoja);

Vea este ejemplo en codepen.io
Otro ejemplo más elaborado también en codepen.io

See the Pen Green apple by Gabi (@enxaneta) on CodePen.