您調(diào)用setTransform(a, b, c, d, e, f)創(chuàng)建一個 3x3仿射變換矩陣：
| a c e |
| b d f |
| 0 0 1 |
給定您當前的值 (1, 0.5, -1, 0.5, n, 0) 有一個逆矩陣：
| 0.5 1 -n/2 |
| -0.5 1 +n/2 |
| 0 0 1 |
將該變換矩陣應用于您的鼠標坐標（需要表示為 1x3 矩陣[x, y, 1]應提供所需的網(wǎng)格坐標：
const rows = 10;
const columns = 6;
const $coordinate = $("#coordinate");
const $canvas = $("#canvas");
canvas.width = (rows * 32) + (columns * 32);
canvas.height = (rows * 16) + (columns * 16);
const context = $canvas[0].getContext("2d");
context.imageSmoothingEnabled = false;
context.save();
context.fillStyle = "white";
context.setTransform(1, 0.5, -1, 0.5, (columns * 32), 0);
// (a) horizontal scaling: 1
// (b) horizontal skewing: 0.5
// (c) vertical skewing: -1
// (d) vertical scaling: 0.5
// (e) horizontal moving: (columns * 32)
// (f) vertical moving: 0
for(let row = 0; row < rows; row++) {
for(let column = 0; column < columns; column++) {
context.rect(row * 32, column * 32, 31.5, 31.5);
}
}
context.fill();
$canvas.mousemove(function(e) {
const position = {
left: e.pageX - $canvas.offset().left,
top: e.pageY - $canvas.offset().top
};
const innerPosition = {
left: position.left * 0.5 + position.top - (columns * 32) / 2,
top: position.left * -0.5 + position.top + (columns * 32) / 2
};
const coordinate = {
row: Math.floor(innerPosition.top / 32),
column: Math.floor(innerPosition.left / 32)
};
$coordinate.html(coordinate.row + "x" + coordinate.column);
});
#canvas {
background: green;
}
#coordinate {
position: absolute;
font-family: Arial, sans-serif;
font-size: 16px;
left: 12px;
top: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<div id="coordinate">0x0</div>
