3

paper.js は初めてです。

このプロジェクトでは、多くのインスタンス (塗りつぶしの色が異なる) で使用される形状が必要なので、(Path.clone() メソッドを使用する代わりに) シンボルを使用する方が明らかに優れています。ただし、シンボルをplacedSymbolにインスタンス化すると、fillColorプロパティを変更してもレンダリングされた形状には影響がないように見えます.シンボルの初期色のままです.

位置や不透明度などのその他のプロパティは正常に設定されています。

私の質問: シンボルの各インスタンスの塗りつぶしの色を変更するにはどうすればよいですか?

ここの jsFiddle: http://jsfiddle.net/GlauberRocha/uTskY/ (すべてのコードを HTML ペインに配置したことに注意してください。それ以外の場合は動作しないようです。おそらく paperscript はプレーンな JavaScript ではないためです)。

Paperscript コード:

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;
}
4

2 に答える 2

5

paper.jsチームのJonathanPuckeyによる回答：

これは仕様によるものです。シンボルのインスタンスの視覚的プロパティを変更することはできません。アイテムの色を変更するには、を使用してパスの複数のコピーを作成できますpath.clone()。

于 2012-03-22T06:36:42.563 に答える
0 
$("#symbol_id").find("g").attr('fill', "#colorOfChoice");

Alt、変更したい g:s の ID を設定し、

$("#symbol_id").find("#g_id").attr('fill', "#colorOfChoice");
于 2016-02-23T13:49:06.553 に答える