Kinetic.js - 創建網格

Question

我是Kintetic.js的新手，我試圖做網格。寬度是800px，高度是400px。我想要正方形（20x20）來覆蓋那個區域。每個廣場都有1px的邊框。因此，像這樣：

var box = new Kinetic.Rect({ 
    width: 20, 
    height: 20, 
    fill: 'transparent', 
    stroke: 'rgba(0, 0, 0, 0.02)' 
}); 

，並填補畫布，我有一個糟糕的循環是這樣的：

for (var i = 0; i <= this.field.getWidth(); i = i + 20) { 
    for (var i2 = 0; i2 <= this.field.getHeight(); i2 = i2 + 20) { 
    var cbox = box.clone({x: i, y: i2}); 
    this.grid.add(cbox); 
    } 
} 

this.grid是Kinetic.Layer。這個代碼的第一個問題是，它非常慢，在網格出現之前我得到了500毫秒的延遲。但最糟糕的是，如果我在cbox上放置了一個mouseover和mouseout事件來改變填充顏色，那麼渲染真的很慢。我是這樣做的：

cbox.on('mouseover', function() { 
    this.setFill('black'); 
    self.grid.draw(); 
}); 

cbox.on('mouseout', function() { 
    this.setFill('transparent'); 
    self.grid.draw(); 
}); 

所以我的問題是我該如何改進代碼和性能呢？

Answer 1

如何使用線條製作網格並使用一個矩形進行光標高亮顯示？ 這裏我寫的例子給你： http://jsfiddle.net/e_aksenov/R72Xu/30/

var CELL_SIZE = 35, 
w = 4, 
h = 5, 
W = w * CELL_SIZE, 
H = h * CELL_SIZE; 

var make_grid = function(layer) { 
var back = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: W, 
    height: H, 
    fill: "yellow" 
}); 
layer.add(back); 
for (i = 0; i < w + 1; i++) { 
    var I = i * CELL_SIZE; 
    var l = new Kinetic.Line({ 
     stroke: "black", 
     points: [I, 0, I, H] 
    }); 
    layer.add(l); 
} 

for (j = 0; j < h + 1; j++) { 
    var J = j * CELL_SIZE; 
    var l2 = new Kinetic.Line({ 
     stroke: "black", 
     points: [0, J, W, J] 
    }); 
    layer.add(l2); 
} 
    return back; //to attach mouseover listener 
}; 

var cursor_bind = function(layer, grid_rect, rect) { 

grid_rect.on('mouseover', function(e) { 
    var rx = Math.floor(e.x/CELL_SIZE); 
    var ry = Math.floor(e.y/CELL_SIZE); 
    rect.setPosition(rx * CELL_SIZE, ry * CELL_SIZE); 
    layer.draw(); 
}); 
}; 

var stage = new Kinetic.Stage({ 
container: "kinetic", 
width: 800, 
height: 600, 
draggable: true 
}); 

var layer = new Kinetic.Layer(); 

var rect = new Kinetic.Rect({ 
x: 0, 
y: 0, 
width: CELL_SIZE, 
height: CELL_SIZE, 
fill: "#00D2FF", 
stroke: "black", 
strokeWidth: 4 
}); 

var gr = make_grid(layer); 
cursor_bind(layer, gr, rect); 

// add the shape to the layer 
layer.add(rect); 

// add the layer to the stage 
stage.add(layer);​