计算自定义光标之间的正确间隙

Question

我在尝试在 canvas 中创建自定义 cursor/crosshair 时遇到问题。我遇到的问题是为形成光标的四个矩形指定的长度、宽度和间隙产生的中心间隙像素数量不正确。

实时 CodeSandbox：https://codesandbox.io/s/nifty-resonance-bcl0m

在上面的例子中，测量光标的长度和宽度是正确的，但是，中心间隙给出了 10 个像素而不是 6 个像素（间隙 * 2）。我知道问题一定是由于我如何计算每个矩形的 X/Y 位置，但我似乎无法找到不会影响光标整体外观的正确公式。

Answer 1

发生这种情况是因为您计算了两次差距：

您的代码：

const length = 6;
  const width = 4;
  const gap = 3;
  const x = 400 / 2;
  const y = 400 / 2;
  return (
    <div className="App">
      <Stage width={400} height={400}>
        <Layer>
          {/* Horizontal Rectangles */}
          <Rect
            x={x + (width / 2 + gap)}
            y={y - width / 2}
            width={length}
            height={width}
            fill="green"
          />
         </layer>
     </div>

计算水平长度时：(width / 2) + gap == (4/2) + 3 = 5。您可以从计算中删除宽度，使间隙为 6

计算自定义光标之间的正确间隙

Calculating the correct gap between custom cursor

javascript

reactjs

canvas