Kinetic.js–创建网格
Kinetic.js – creating a grid
我是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();
});
所以我的问题是如何改进代码和性能?
如何用线条制作网格并使用一个矩形来突出显示光标?在这里,我为您写了一个例子: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);
相关文章:
- 使用导航属性创建Kendo UI网格模型的问题
- 如何在创建新网格之前销毁网格堆栈
- 如何在ExtJS网格上创建带有标签的文本字段
- 如何使用角度两个绑定来动态创建的剑道网格
- Kinetic.js–创建网格
- 创建过去365天的日历网格
- Three.js:我可以创建网格来替换很多对象吗
- 如何在Meteor.js中使用车把创建网格系统
- 如何在Jquery中使用kendo ui创建内联网格编辑
- 如何为剑道网格创建、更新和删除IList中的数据
- Masonry:在AJAX回调上创建一个网格
- JavaScript-从脚本中的单词列表创建一个html表或网格
- 如何使用javascript在选中网格视图复选框时创建表行
- 角度.js ng 重复用于创建网格
- C#网格视图从动态创建的DataTable中实现可点击单元格
- 我怎么能用Codeigniter在可滚动的部分创建一个无限向下滚动的网格加载程序呢
- 在网格内创建一个在单击时打开的菜单
- 为全局网格创建 LatLng 对数组
- 剑道UI网格创建聚合函数
- 在Javascript / jQuery中基于选项网格创建递归函数