Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/396.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Paper.js:can';t设置符号实例的填充颜色_Javascript_Canvas_Html5 Canvas_Paperjs - Fatal编程技术网

Javascript Paper.js:can';t设置符号实例的填充颜色

Javascript Paper.js:can';t设置符号实例的填充颜色,javascript,canvas,html5-canvas,paperjs,Javascript,Canvas,Html5 Canvas,Paperjs,我是paper.js的新手 对于这个项目,我需要一个可以在许多情况下使用的形状(具有不同的填充颜色),因此显然最好使用一个符号(而不是使用Path.clone()方法)。 但是,一旦我将符号实例化为placedSymbol,更改fillColor属性似乎对渲染的形状没有影响:它仍然是符号的初始颜色 其他属性(如位置或不透明度)已成功设置 我的问题:如何更改符号每个实例的填充颜色 JSFIDLE here:(注意,我已将所有代码放在HTML窗格中。否则似乎不起作用,可能是因为paperscript

我是paper.js的新手

对于这个项目,我需要一个可以在许多情况下使用的形状(具有不同的填充颜色),因此显然最好使用一个符号(而不是使用Path.clone()方法)。 但是,一旦我将符号实例化为placedSymbol,更改fillColor属性似乎对渲染的形状没有影响:它仍然是符号的初始颜色

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

我的问题:如何更改符号每个实例的填充颜色

JSFIDLE here:(注意,我已将所有代码放在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;
}
var
路径=新路径(),
符号={},
inst=[],
这些颜色的颜色=[“1f5551f88 8 8“,“C7c55A8 8 8”,“11b44A9F”,“d6a493”,,“D6AA493”,,“1a8879”,“111888 8 8 8 8 8 8 8个颜色颜色=“1f5555577777777777777A9F”,“,,,“D66AAAAAA493”,“,,,,,,,,,“1AAAAA888879“,,,,,,,,,,,,,,,“11188888888888888888888888“,,,,,,,,,,,,,“11111111111111111111111111111111“,”1a8077“,”1b3849“,”ae832a“,”186cc9“,”1b8178“]
添加(新点(0,56)、新点(56,0)、新点(56,40)、新点(0,96));
path.fillColor=“红色”;
path.closed=true;
符号=新符号(路径);
path.remove();
对于(变量i=0;i<20;++i){
inst[i]=symbol.place();
inst[i].fillColor=colors[i];//更改填充颜色:否
console.log(inst[i].fillColor);//但是……正确的颜色值出现在这里
inst[i].不透明度=(i/30)+.4;//更改不透明度:确定
inst[i].position.x=100;//更改位置:确定
仪器[i].位置y=42*i+50;
}

由paper.js团队的Jonathan Puckey回答:

这是故意的。不能更改图形的视觉特性 符号的实例。要更改项目的颜色,可以创建 使用
path.clone()
创建路径的多个副本

Alt,设置要更改的g:s的ID,然后

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

这是一个老话题,所以我记不太清楚,但您的答案似乎与svg有关,而不是paper.js(如果我没有弄错的话,它是基于画布的)。
$("#symbol_id").find("#g_id").attr('fill', "#colorOfChoice");