vector - examples - Cómo lograr ''agujeros de rosquilla'' con senderos en Rafael

svg map interactive html

Question

Me gustaría dibujar una forma que tenga agujeros para que pueda fill la forma y no tener los agujeros llenos con ese color (déjelos transparentes).

De acuerdo con la especificación de ruta W3 :

Las rutas compuestas (es decir, una ruta con múltiples subcampos) son posibles para permitir efectos tales como "agujeros de rosquilla" en los objetos.

¿Alguien puede por favor dar un ejemplo muy simple de cómo realizar esto con una ruta vectorial en Rafael ?

Muchas gracias.

Answer 1

Esto resulta bastante sencillo si conoces el truco. Por ejemplo, esto no funciona :

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + 
          " M 75 75 L 75 125 L 125 125 L 125 75 z")
.attr("fill", "#f00");

Pero esto funciona *:

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 z")
.attr("fill", "#f00");

La diferencia es que para que el donut aparezca, el camino interno debe tener sus vértices dibujados en orden inverso al camino externo (es decir, dibujar uno en el sentido de las agujas del reloj y el otro en el sentido contrario al de las agujas del reloj). Un bocado que encontré en los archivos text.xml.svg.devel .

(*) Por lo menos, funciona en Chrome, Opera y Firefox 4.0 beta, pero no en 3.6

Answer 2

Para que esto funcione en Firefox 3.6, debes cerrar el agujero; es decir, hacer que las coordenadas se vuelvan a unir a sí mismas al definir el límite interno. Curiosamente, esto no parece necesario para el límite exterior.

paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
          " M 75 75 L 125 75 L 125 125 L 75 125 L 75 75 z")
.attr("fill", "#f00");

Solo una nota rápida para hacer un seguimiento del comentario: el concepto en sentido horario / antihorario puede parecer extraño al principio, pero es bastante estándar en todas las tecnologías GIS / CAD.

Answer 3

Creo que la forma correcta de hacerlo es establecer el atributo "fill-rule" en el valor "evenodd". Echa un vistazo a la especificación svg :

No intente configurarlo con "Raphael.Element.attr ()". No funciona Yo uso la función jQuery.attr () en su lugar:

// assuming paper is a Raphael.Paper object
path = paper.path(''Mx,y{some path commands for the main shape}Z''
                  +''Mx,y{some path commands for the hole}Z''
);

// this doesn''t work
path.attr({''fill-rule'': ''evenodd''});
// neither this
path.attr({fillRule: ''evenodd''});

// if you inspect the object returned by paper.path
// you can see it has a reference to the DOM element
console.debug(path)

// so a bit of jQuery and it''s done
$(path[0]).attr(''fill-rule'', ''evenodd'');

Lo he usado en caminos complejos con resultados exitosos.

Answer 4

Para cualquiera que quiera donuts circulares, gran plugin fácil Raphael-donut-plugin

Esencia:

Raphael.fn.donut = function(x, y, innerRadius, outerRadius) {
  y -= outerRadius;
  return this.path(''M''+x+'' ''+y+''a''+outerRadius+'' ''+outerRadius +
      '' 0 1 0 1 0m-1 ''+
      (outerRadius - innerRadius)+
      ''a''+innerRadius+'' ''+innerRadius+
      '' 0 1 1 -1 0'');
};