javascript - full - Paper.js: no se puede establecer fillColor de una instancia de símbolo

paperjs intersection

Question

Soy nuevo en paper.js.

Para este proyecto, necesito una forma que se utilizará en muchas instancias (con diferentes colores de relleno), por lo que aparentemente es mejor usar un símbolo (en lugar de utilizar el método Path.clone ()). Sin embargo, una vez que crea una instancia del símbolo en un símboloSitio, parece que cambiar la propiedad fillColor no tiene ningún efecto sobre la forma representada: sigue siendo el color inicial del símbolo.

Otras propiedades, como la posición u opacidad, se configuran correctamente.

Mi pregunta: ¿cómo puedo cambiar el color de relleno de cada instancia de un símbolo?

jsFiddle aquí: http://jsfiddle.net/GlauberRocha/uTskY/ (tenga en cuenta que he puesto todo el código en el panel de HTML. Parece que no funciona de otra manera, probablemente porque paperscript no es simple javascript).

Código del documento de síntesis:

var
path = new Path(),
symbol = {},
inst = [],
colors = ["#1f8f81", "#c7c5a8", "#1b4a9f", "#d6a493", "#1a8879", "#599ce3", "#1a459c", "#b9a87a", "#365db2", "#2479d4", "#a46430", "#1b449a", "#a4632e", "#1a4297", "#3359ad", "#b1852b", "#1a8077", "#1b3849", "#ae832a", "#186cc9", "#1b8178"]
path.add(new Point(0, 56), new Point(56, 0), new Point(56, 40), new Point(0, 96));
path.fillColor = "red";
path.closed = true;
symbol = new Symbol(path);
path.remove();
for (var i = 0; i < 20; ++i) {
inst[i] = symbol.place();
inst[i].fillColor = colors[i]; // Change fill color : NO
console.log(inst[i].fillColor); // But... the correct color value appears here
inst[i].opacity = (i / 30) + .4; // Change opacity: OK
inst[i].position.x = 100; // Change position: OK
inst[i].position.y = 42 * i + 50;
}

Answer 1

Respondido por Jonathan Puckey, del equipo de paper.js:

Esto es por diseño. No puede cambiar las propiedades visuales de una instancia de un Símbolo. Para cambiar el color del elemento, puede crear varias copias de la ruta usando path.clone() .

Answer 2

$("#symbol_id").find("g").attr(''fill'', "#colorOfChoice");

Alt, establece el ID del g: s que quieres cambiar y

$("#symbol_id").find("#g_id").attr(''fill'', "#colorOfChoice");