0

ステージに2つのレイヤーを入れています。最初のレイヤーには長方形しかありません。もう一方のレイヤーには、いくつかの線オブジェクトがあります。これらの線を非常に高速に描画する必要があるため、すべての線を一度に描画しようとしていますが、うまくいきませんでした。これが私のコードです：

var line = new Kinetic.Line({
                points : line_points,
                stroke : 'black',
                strokeWidth : 5,
                lineCap : 'round'
            });
            layer.add(line);
            layer.draw();
        });

    };

});

stage.add(layer);

このコードは、作成後にすべての線を個別に描画するため、少し時間がかかります。一度にすべての線を引くにはどうすればよいですか?

ここに私の機能の残りの部分があります:

function draw_ways(db, minLon, maxLon, minLat, maxLat, stage) {

var layer = new Kinetic.Layer();

get_interval_ways(db, minLon, maxLon, minLat, maxLat, function(result) {
    for (var i = 0; i < result.length; i++) {
        get_interval_nodes(db, result[i].way_id, function(result2) {
            var line_points = new Array();
            for (var j = 0; j < result2.length; j++) {
                line_points.push(getLocationX(result2[j].lon, minLon, maxLon, MAP_WIDTH));
                line_points.push(getLocationY(result2[j].lat, minLat, maxLat, MAP_HEIGHT));
            };

            var line = new Kinetic.Line({
                points : line_points,
                stroke : 'black',
                strokeWidth : 5,
                lineCap : 'round'
            });
            layer.add(line);
            layer.draw();
        });
    };
});
stage.add(layer);
console.log(stage);

}

4

1 に答える 1

0

for ループで複数の行を描画する場合は、次のような配列を使用する必要があります。

var line = [];
var line_count = 5;
for (var i=0; i<line_count; i++) {
  line[i] = new Kinetic.Line({
    points : line_points,
    stroke : 'black',
    strokeWidth : 5,
    lineCap : 'round'
  });
  layer.add(line[i]);
}
layer.draw(); //We only need to draw the layer once, so put it outside the for-loop

※全ての線がレイヤーに追加された後、一度レイヤー全体を描画すると、それらはすべて一緒にレイヤーに描画されます。

JSFIDDLE

于 2013-09-10T13:42:00.653 に答える