Question

我在舞台上放了两层。第一层只有一个矩形。另一层有几个线对象。我需要非常快地绘制这些线条，所以我试图一次绘制所有线条，但我无法使它工作。这是我的代码：

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);

}

Answer 1

如果你想在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

在舞台KineticJS中绘制所有形状

1 个答案: