我正处于为混合Web /文本冒险游戏制作2d地图构建器的原型开发阶段，到目前为止，KineticJS似乎很合适。当前唯一的问题是，如果鼠标移动的速度足够快，它将跳过单元格并且从不触发其鼠标悬停事件处理程序。
2个核心功能目标：当用户突出显示一个单元格时，它将被标记为“活动”。此外，如果按住鼠标并在网格上移动，则将打开或关闭单元格（如果第一个单元格处于非活动状态，则可以重构为全部打开，反之亦然）。
我的问题：有没有一种方法可以确保所有单元格都被触发，而不管鼠标光标的速度如何？如果没有，是否有更好的方法在单元格上画一条线，以使其始终触发所有相关单元格？]
整个原型已经放入jsFiddle（http://jsfiddle.net/7ggS4/），但是为了将来起见，其余的也将在下面复制。
<head>
<title>KineticJS</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/4.7.2/kinetic.min.js"></script>
</head>
<body>
<div id="canvas"></div>
</body>
<script defer="defer">
/**
Return's a KS layer
*/
function Grid(cells, stage) {
//Constants
// Illrelevant comment - It seriously pisses me off that canvas uses
// string color codes ( either name or string hexidecimal ) instead of taking an
// integer or actual hexidecimal 0xFFFF values. This just seems painfully inefficient.
this.activeCellColor = "green";
this.clearCellColor = "blue";
this.highlightCellColor = "red";
this.cells = cells,
this.layer = new Kinetic.Layer(),
this.grid = new Array(),
this.isMouseDown = false,
this.mouseLeft = false,
this.mouseRight = false,
this.adjRow = stage.getWidth() / cells,
this.adjCol = stage.getHeight() / cells;
this.generate();
stage.add(this.layer)
}
Grid.prototype.generate = function(){
var i, rx, ry, rect;
for (i = 0; i < this.cells * this.cells; i++) {
rx = Math.floor(i / this.cells) * this.adjRow;
ry = (i % this.cells) * this.adjCol;
rect = new Kinetic.Rect({
x: rx,
y: ry,
width: this.adjRow,
height: this.adjCol,
fill: this.clearCellColor,
stroke: 'black',
strokeWidth: .2,
cell: {x: Math.floor(i / this.cells), y: i % this.cells},
active: false,
grid: this //Just in case .bind(this) doesn't work right
});
rect.on('mouseenter', this.onMouseEnter.bind(this));
rect.on('mouseleave', this.onMouseLeave.bind(this));
rect.on('mousedown', this.onMouseDown.bind(this));
rect.on('mouseup', this.onMouseUp.bind(this));
this.grid.push(rect);
this.layer.add(rect);
}
}
Grid.prototype.onMouseEnter = function(evt) {
var src = evt.targetNode;
console.log(evt.type, this.isMouseDown, src.attrs.cell)
if (this.isMouseDown == true) {
src.attrs.active = ! src.attrs.active;
}
if (src.attrs.active == false) {
src.setFill(this.highlightCellColor);
} else {
src.setFill(this.activeCellColor);
}
this.layer.batchDraw();
}
Grid.prototype.onMouseLeave = function(evt) {
var src = evt.targetNode;
console.log(evt.type, this.isMouseDown, src.attrs.cell)
if (src.attrs.active == false) {
src.setFill(this.clearCellColor);
this.layer.batchDraw();
}
}
Grid.prototype.onMouseUp = function(evt){
var src = evt.targetNode;
console.log(evt.type, this.isMouseDown, src.attrs.cell)
this.isMouseDown = false;
}
Grid.prototype.onMouseDown = function(evt){
var src = evt.targetNode;
console.log(evt.type, this.isMouseDown, src.attrs.cell)
this.isMouseDown = true;
src.attrs.active = ! src.attrs.active;
if (src.attrs.active) {
src.setFill(this.activeCellColor);
} else {
src.setFill(this.clearCellColor);
}
this.layer.batchDraw();
}
var stage = new Kinetic.Stage({
container: 'canvas',
width: 600,
height: 600
}),
myGrid = new Grid(50, stage);
</script>
50x50 = 2500个活动对象：Kinetic无法处理的太多。
请记住，每个“智能”运动单元都有很多相关的开销。
将网格缩小到20x20怎么样？
或者，您必须将鼠标处理与单元处理分开，以获得所需的性能。
鼠标处理
您的鼠标处理仅涉及将鼠标点捕获到一组累积点中。您可以使用这种代码在舞台上捕获鼠标点：
$(stage.getContent()).on('click', function (event) {
myPointsArray.push(stage.getMousePosition());
});
单元格处理
单元格处理将涉及应用那些累积的点来影响您的网格单元格。执行此代码的有效位置是在requestAnimationFrame（RAF）循环中。您不会制作动画，但是RAF可以提供高性能，因为它知道系统资源的可用性。一个RAF循环如下所示：
function processPointsArray(array){
// request another loop even before we're done with this one
requestAnimationFrame(processPointsArray);
// process the points array and affect your cells here
}
处理效率
RAF每秒被调用多达60次，因此您的用户在此期间可能只会浏览网格的一小部分。您可以通过计算累积点数组中的最小/最大x和y坐标来提高性能，并且仅处理该边界内的那些网格单元。