Clever Geek Handbook

Paper.js: unable to set fillColor of character instance

I am new to paper.js.

For this project, I need a shape that will be used in many cases (with different fill colors), so it seems to be better to use a symbol (instead of using the Path.clone () method). However, as soon as I create the character in the placed character, it seems that changing the fillColor property does not affect the rendered shape: it remains the original color of the character.

Other properties like position or opacity have been set successfully.

My question is, how do I change the fill color for each symbol instance?

The jsFiddle is here: http://jsfiddle.net/GlauberRocha/uTskY/ (note that I put all the code in the HTML pane. It doesn't seem to work otherwise, probably because documentcript is not plain javascript).

Document code:

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;
}
+3


source to share


2 answers


Posted by Jonathan Pookie, of the paper.js team:



This is by design. You cannot change the visual properties of an instance of a Symbol. To change the color of an element, you can create multiple copies of the path with path.clone()

.

+5


source 


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

Alt, set the g: s id you want to change and



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


source






More articles:


All Articles