javascript - 如何正确寻址 Canvas 网格上的单元格？

Question

我想使用 Canvas API 创建一个方形网格，其中每个单元格的底部都有一个 1px 边框，右侧有一个 1px 边框。然后整个网格将在其周围绘制一个 1px 边框，因此它看起来像这样:

一旦网格存在，我想编写一个函数来突出显示给定的单元格。例如，调用 highlightCell(1, 3, 'green') 将导致以下结果:

我以为这很简单，但我花了很长时间才解决它。我的问题是，当我考虑到必须跨越像素线时——例如从3.5绘制到7.5，而不是3到7，以免线条模糊——计算坐标的数学似乎并不像我那样工作预期在边缘，我得到这样的结果，其中突出显示未正确放置。

我的数学是:

• 我想要一个 700x700 像素的网格，分为 35 个单元格
• Canvas 本身的尺寸为 702x702 像素，每侧都有 1 像素的边框
• 单元格的东边框为 1 像素，南边框为 1 像素，因此突出显示的矩形为 19x19 像素
• 其中 w 是 Canvas 的宽度(以 px 为单位)，h 是 Canvas 的高度，从 (0.5, 0.5) --> (w + 0.5, 0.5) --> (w + 0.5, h + 0.5) --> (0.5, h + 0.5) --> (0.5, 0.5)，为第一个和最后一个像素行以及第一个和最后一个像素列创建实线。则内部空间为 700x700。
• 通过在？？？处绘制一个19x19像素的矩形来突出显示单元格2,4。我无法找出一个始终有效的值。

我很感激有人解释我做错了什么，因为我确信这是愚蠢的事情，但我就是看不到它。

Here's the JS Fiddle of my attempt.

Answer 1

我会通过分离逻辑和绘图来做到这一点。例如，通过一个 state 对象和一个 drawFrame 函数；像这样:

// setup state
const state = {
  __arr: [],
  __width: 20,
  __height: 20,
  __cell: {
    width: 20,
    height: 20,
  },
  __onUpdate: () => {},
  __calcIndex(x, y) {
    const index = x + y * this.__width;
    if (index >= this.__arr.length || index < 0) {
      throw new Error('Invalid index!');
    }
    return index;
  },
  init(onUpdate) {
    this.__arr = Array(this.__width * this.__height).fill(0);
    this.__onUpdate = onUpdate;
  },
  get(x, y) {
    const index = this.__calcIndex(x, y);
    return this.__arr[index];
  },
  set(x, y, value) {
    const index = this.__calcIndex(x, y);
    this.__arr[index] = value;
    this.__onUpdate();
  },
};

// setup drawing logic
const canvas = document.createElement('canvas');
document.body.append(canvas);
const ctx = canvas.getContext('2d');

const drawFrame = () => {
  const cell = state.__cell;
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'orangered';
  for (let x = 0; x < state.__width; x++) {
    for (let y = 0; y < state.__width; y++) {
      ctx.strokeRect(cell.width * x, cell.height * y, cell.width, cell.height);
      if (state.get(x, y) !== 0) {
        ctx.fillRect(1 + cell.width * x, 1 + cell.height * y, cell.width-1, cell.height-1);
      }
    }
  }
}

state.init(drawFrame);
canvas.width = state.__width * state.__cell.width;
canvas.height = state.__height * state.__cell.height;
drawFrame();

state.set(2, 4, 1);
state.set(3, 5, 1);
state.set(2, 6, 1);
state.set(7, 4, 1);