Paper.js：不能设置符号实例的fillColor [英] Paper.js: can't set fillColor of a symbol instance

问题描述

我是paper.js的新手。

对于这个项目，我需要一个在许多实例中使用的形状（使用不同的填充颜色）它显然更好地使用一个符号（而不是使用Path.clone（）方法）。
然而，一旦我将符号实例化为一个putsSymbol，似乎更改fillColor属性对呈现的形状没有影响：它仍然是符号的初始颜色。

其他属性，如位置或不透明度，已成功设置。

我的问题：如何更改符号的每个实例的填充颜色？ / p>

jsFiddle这里： http://jsfiddle.net/GlauberRocha / uTskY / （注意，我把所有的代码放在HTML窗格中，似乎不工作，否则可能是因为paperscript不是纯javascript）。

Paperscript代码：

  var 
 path = new Path（），
 symbol = {＃19983}，＃599ce3，＃599ce3，＃599ce3，＃599ce3， ＃1a459c，＃b9a87a，＃365db2，＃2479d4，＃a46430，＃1b449a，＃a4632e，＃1a4297，＃3359ad，＃b1852b ＃1a8077，＃1b3849，＃ae832a，＃186cc9，＃1b8178] 
 
 path.add（新点（0,56） ），新点（56,40），新点（0,96））; 
 path.fillColor =red; 
 path.closed = true; 
 symbol = new符号（路径）; 
 path.remove（）; 
 
 for（var i = 0; i <20; ++ i）{
 inst [i] = symbol.place（）; 
 inst [i] .fillColor = colors [i]; //更改填充颜色：NO 
 console.log（inst [i] .fillColor）; // But ...正确的颜色值出现在这里
 inst [i] .opacity =（i / 30）+ .4; // Change opacity：OK 
 inst [i] .position.x = 100; //改变位置：OK 
 inst [i] .position.y = 42 * i + 50; 
} 
  

解决方案

由Jonathan Puckey回答paper.js小组：

这是设计。您不能更改符号的
实例的视觉属性。要更改项目的颜色，可以使用 path.clone（）创建
路径的多个副本。

I'm new to paper.js.

For this project, I need a shape that will be used in many instances (with different fill colors), so it's apparently better to use a symbol (instead of using the Path.clone() method). However, once I instantiate the symbol into a placedSymbol, it seems that changing the fillColor property has no effect on the rendered shape: it remains the initial color of the symbol.

Other properties, such as position or opacity, are successfully set.

My question: how can I change the fill color of each instance of a symbol?

jsFiddle here: http://jsfiddle.net/GlauberRocha/uTskY/ (note that I've put all the code in the HTML pane. Doesn't seem to work otherwise, probably because paperscript isn't plain javascript).

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

解决方案

Answered by Jonathan Puckey, 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 the item, you can create multiple copies of the path by using path.clone().

这篇关于Paper.js：不能设置符号实例的fillColor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！