0

Paperjs サイトでは、このページに複数のアイテムを移動する例があります。この例を変更して、円を下から上に連続的に浮かせようとしています。これまでのところ、下から上に浮かせることができましたが、何らかの理由で連続していません。

この例で行おうとしている他の変更は、指定された色の配列に基づいて円にランダムな色を持たせることです。これまでのところ、ランダムな色は、ページが更新されて読み込まれるたびにのみ生成されます。

  1. 円を下から上に連続して浮かせるにはどうすればよいですか?

  2. ページの読み込み時だけでなく、アニメーションで円をランダムに色付けするにはどうすればよいですか?

ここに私の変更されたコードがあります:

// The amount of circles we want to make:
    var count = 50;

    /*random colors for circles*/
    var circleColors = new Array();
    circleColors[0] = "#2ab4e4";//BLUE
    circleColors[1] = "#a2a7a6";//GREY
    circleColors[2] = "#ef7047";//ORANGE
    circleColors[3] = "#ffffff";//WHITE
    /*end random colors for circles*/

    // Create a symbol, which we will use to place instances of later:
    var path = new Path.Circle({
        center: [0, 0],
        radius: 35,
        fillColor: circleColors[Math.floor(Math.random() * circleColors.length)]
    });

    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);
        placedSymbol.scale(i / count);
    }

    // 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.y -= item.bounds.height / 20;

            // If the item has left the view on the right, move it back
            // to the left:
            if (item.bounds.bottom > view.size.height) {
                item.position.y = -item.bounds.height;
            }
        }
    }

Paperjs の元のコードは次のとおりです。

// The amount of circles we want to make:
    var count = 150;

// Create a symbol, which we will use to place instances of later:
    var path = new Path.Circle({
    center: [0, 0],
    radius: 10,
    fillColor: 'white',
    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);
    placedSymbol.scale(i / count);
    }

// 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 / 20;

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

1 に答える 1

0

paper.js 座標系の原点は、キャンバスの左上隅にあります。ビューポートの境界より下にアイテムを配置するには、ビューの高さをアイテムの高さに追加する必要があります。

if (item.bounds.bottom < 0) {
            item.position.y = view.size.height+item.bounds.height;
        }

ランダムな色に関しては、オブジェクト間で色のスタイルを変えるには、placedSymbol ではなく、pathItem を使用する必要があります。これの代わりに：

var path = new Path.Circle({
    center: [0, 0],
    radius: 35,
    fillColor: circleColors[Math.floor(Math.random() * circleColors.length)]
});

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);
    placedSymbol.scale(i / count);
}

次のようなものが必要になります。

// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
    var path = new Path.Circle({
    center: Point.random() * view.size,
    radius: i / count,
    fillColor: circleColors[Math.floor(Math.random() * circleColors.length)]
});

詳細については、この投稿を参照してください: Swarm 内のすべてのパスは同じ fillColor を持つ必要がありますか?

于 2013-07-23T17:30:40.003 に答える