Kinetic.js - создание сетки

Я новичок в Kintetic.js и пытаюсь создать сетку. Ширина 800 пикселей, высота 400 пикселей. И я хочу, чтобы квадраты (20x20) покрывали эту область. Каждый квадрат имеет границу в 1 пиксель. Так что-то вроде этого:

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

А чтобы заполнить холст, у меня есть такой дерьмовый цикл for:

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 - это кинетический слой. Первая проблема с этим кодом заключается в том, что он очень медленный, и я получаю задержку примерно в 500 мс перед появлением сетки. Но хуже всего то, что если я помещаю событие mouseover и mouseout в cbox, чтобы изменить цвет заливки, это отрисовывается очень медленно. Вот как я это делаю:

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

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

Итак, мой вопрос: как я могу улучшить код и производительность этого?


javascript html5-canvas kineticjs
person tbleckert    schedule 03.08.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Как насчет того, чтобы сделать сетку из линий и использовать один прямоугольник для выделения курсора? Здесь я написал вам пример: 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);​
person Eugene Aksenov    schedule 04.08.2012
comment
Звучит многообещающе, я обязательно попробую! +1 - person tbleckert; 05.08.2012
comment
Это вроде сработало, но я даю вам правильный ответ, потому что вы меня к этому привели. Помните, что e.x / e.y будет работать, только если холст расположен 0/0. e.layerX / e.layerY работает лучше. - person tbleckert; 05.08.2012