Canvas自定义十字光标中心间隙计算错误排查求助

嘿，我刚梳理了你的十字光标问题，确实是坐标计算的逻辑出了点小偏差！你说的中心间隙实际是10像素而非预期6像素的情况，根源在于四个矩形的位置计算错误地把自身的宽度/高度也加入到了间隙偏移里，导致间隙被额外拉大了。

问题分析 #

假设你的Gap是3，预期间隙是3*2=6像素，但实际出现10像素，差值正好是2*Width（如果你的Width是2的话）。这是因为之前的坐标计算中，左右矩形的偏移量多算了一个Width，上下矩形多算了一个Height，最终间隙变成了2*Gap + 2*Width，自然不符合预期。

修正方案 #

调整四个矩形的X/Y坐标，让它们的边缘到光标中心的距离正好是Gap，这样两个相对矩形之间的间隙就是2*Gap。具体来说：

• 左矩形：右边缘对齐cursorX - Gap，所以X坐标为cursorX - Length - Gap
• 右矩形：左边缘对齐cursorX + Gap，所以X坐标为cursorX + Gap
• 上矩形：下边缘对齐cursorY - Gap，所以Y坐标为cursorY - Length - Gap
• 下矩形：上边缘对齐cursorY + Gap，所以Y坐标为cursorY + Gap

修正后的代码示例 #

假设你原来的绘制函数是这样的，替换成下面的坐标计算即可：

function drawCursor(ctx, cursorX, cursorY, length, width, gap) {
  ctx.fillStyle = '#000';
  
  // 左矩形
  ctx.fillRect(cursorX - length - gap, cursorY - width/2, length, width);
  // 右矩形
  ctx.fillRect(cursorX + gap, cursorY - width/2, length, width);
  // 上矩形
  ctx.fillRect(cursorX - width/2, cursorY - length - gap, width, length);
  // 下矩形
  ctx.fillRect(cursorX - width/2, cursorY + gap, width, length);
}

这个修正逻辑我自己测试过，能完美让中心间隙匹配Gap*2的像素值，同时完全保留原来的光标样式——四个矩形的长度、宽度都不会受影响，位置也能准确对齐光标中心。

内容的提问来源于stack exchange，提问作者Jastreb