0

我不知道如何为 Paper.js 创建一个 jsfiddle，因为我不断收到“域策略”限制；但您可以通过点击此处进行测试：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
    };
}

但是，填充颜色永远不会改变！仅更改某些符号的填充颜色/样式的正确方法是什么？

4

2 回答 2

1

我的答案是根本不使用符号，只需使用如下路径：

// 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;
        }
    }
}
于 2013-09-09T16:31:13.607 回答
0

这是重复的。那边有人给出了正确答案：

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

于 2016-10-29T13:09:50.360 回答