0
我是Kintetic.js的新手,我试图做网格。宽度是800px,高度是400px。我想要正方形(20x20)来覆盖那个区域。每个广场都有1px的边框。因此,像这样:Kinetic.js - 创建网格
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();
});
所以我的问题是我该如何改进代码和性能呢?
这听起来非常有前途的,我一定会努力的! +1 – tbleckert 2012-08-04 22:38:13
这种工作方式,但我给你正确的答案,因为你把我带到了它。请记住,e.x/e.y只有在画布位于0/0时才可用。 e.layerX/e.layerY效果更好。 – tbleckert 2012-08-05 08:35:16