我不知道如何为Paper创建一个jsfiddle.js因为我不断受到"域策略"限制;但是您可以通过转到此处并单击"运行"进行测试:http://paperjs.org/tutorials/animation/creating-animations/#moving-multiple-items
我有以下代码:
// The amount of circles we want to make:
var count = 50;
// Create a symbol, which we will use to place instances of later:
var point = new Point(20, 20);
var size = new Size(60, 60);
var path = new Path.Rectangle({
point: point,
size: size,
fillColor: 'grey',
strokeColor: 'black'
});
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
if (i % 5 == 0) {
placedSymbol.style = {
fillColor: new Color(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
}
}
console.log(project.activeLayer.children[0]);
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.x += item.bounds.width / 100;
//if (i % 5 == 0)
//item.fillColor = new Color(1, 0, 0);
// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.left > view.size.width) {
item.position.x = -item.bounds.width;
}
}
}
我知道我可以像这样更改路径的颜色:
var path = new Path.Rectangle({
point: point,
size: size,
fillColor: 'grey',
strokeColor: 'black'
});
但是,我只想更改可被五整除的特定矩形的颜色:
if (i % 5 == 0) {
placedSymbol.style = {
fillColor: new Color(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
}
但是,填充颜色永远不会改变! 仅更改某些符号的填充颜色/样式的正确方法是什么?
我的答案是根本不使用符号,只使用这样的路径:
// The amount of circles we want to make:
var count = 150;
// Create a symbol, which we will use to place instances of later:
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var path = new Path.Circle({
center: Point.random() * view.size,
radius: i / count + 0.5,
fillColor: 'white',
strokeColor: 'black'
});
if (i % 10 == 0)
path.style.fillColor = '#eee';
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.x += item.bounds.width / 300;
// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.left > view.size.width) {
item.position.x = -item.bounds.width;
}
}
}
这是一个重复项。那边有人给出了正确的答案:
这是设计使然。不能更改符号实例的可视属性。若要更改项目的颜色,可以使用 path.clone() 创建路径的多个副本。