我的网格
tileWidth = 64px
tileHeight = 128px
(图像本身为 128 像素,但实际钻石高 32 像素,宽 64 像素)
正如你所看到的,我有一个交错的网格系统;然而,我花了过去两个小时试图想出一个系统,在该系统中我可以获取相对于 Canvas 的鼠标坐标并找出单击了哪个图 block (显然是在菱形字段内)。
例如,如果我单击图 block 21, 26
- 我将如何在程序中计算出来?
任何朝着正确方向工作的指示将不胜感激。谢谢!
最佳答案
如果您知道单元格的中心位置(当然,因为它们是渲染的),您只需根据单元格标准化坐标即可确定它是否在内部:
var dx = Math.abs(x - cellCenterX),
dy = Math.abs(y - cellCenterY);
if (dx / (cellWidth * 0.5) + dy / (cellHeight * 0.5) <= 1) { /* is inside */ };
这是一个完整的演示:
var cw = 64,
ch = 32,
cells = [],
maxH = 10,
maxV = 5,
toggle = true,
canvas = document.getElementById("canvas"),
ctx = canvas.getContext('2d');
// Using a cell object for convenience here:
function Cell(posX, posY, x, y, w, h) {
this.posX = posX; // some id....
this.posY = posY; // some id....
this.x = x; // cells top position
this.y = y;
this.w = w; // width and height of cell
this.h = h;
this.centerX = x + w * 0.5; // abs. center of cell
this.centerY = y + h * 0.5;
}
// draw this cell:
Cell.prototype.render = function(ctx, color) {
ctx.beginPath();
ctx.moveTo(this.centerX, this.y);
ctx.lineTo(this.x + this.w, this.centerY);
ctx.lineTo(this.centerX, this.y+this.h);
ctx.lineTo(this.x, this.centerY);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
ctx.strokeStyle = "#000";
ctx.stroke();
};
// check if x/y is inside this cell
Cell.prototype.isInCell = function(x, y) {
var dx = Math.abs(x - this.centerX),
dy = Math.abs(y - this.centerY);
return (dx / (this.w * 0.5) + dy / (this.h * 0.5) <= 1);
};
// generate cell map
for(var y = 0; y < maxV; y++) {
var dltX = toggle ? 0 : -cw * 0.5,
dltY = -ch * 0.5 * y;
toggle = !toggle;
for(var x = 0; x < maxH; x++) {
var c = new Cell(x, y, x * cw + dltX, y * ch + dltY, cw, ch);
cells.push(c);
c.render(ctx, "#9f0"); // green bg
}
}
// test by clicking in cell
canvas.onclick = function(e) {
var r = canvas.getBoundingClientRect(),
x = e.clientX - r.left,
y = e.clientY - r.top,
i = 0, cell;
for(; cell = cells[i]; i++) {
if (cell.isInCell(x, y)) {
cell.render(ctx, "#f00"); // red bg if inside
out.innerHTML = "Cell pos: (" + cell.posX + "," + cell.posY + ") X: " + cell.x + " Y: " + cell.y;
break;
}
}
};
<canvas id=canvas width=500 height=100></canvas><br>
<output id=out></output>
关于canvas - 查找在等距交错列系统中单击了哪个图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27100729/