I’m having an issue where I’m trying to create a custom cursor/crosshair within my canvas. The issue I have is the specified Length, Width, and Gap given to the four rectangles to form the cursor is producing the incorrect amount of pixels for the center gap.
Live CodeSandbox: https://codesandbox.io/s/nifty-resonance-bcl0m
Code:
import "./styles.css";
import { Stage, Layer, Rect } from "react-konva";
export default function App() {
const length = 15;
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"
/>
<Rect
x={x - (length + width / 2 + gap)}
y={y - width / 2}
width={length}
height={width}
fill="green"
/>
{/* Vertical Rectangles */}
<Rect
x={x - width / 2}
y={y - (length + width / 2 + gap)}
width={width}
height={length}
fill="blue"
/>
<Rect
x={x - width / 2}
y={y + (width / 2 + gap)}
width={width}
height={length}
fill="blue"
/>
</Layer>
</Stage>
</div>
);
}
In the above example, measuring the cursors Length and Width is the correct amount but, the center gap is giving 10 pixels instead of 6 pixels (Gap * 2). I know the issue must be due to how I’m calculating the X/Y positions of each rectangle but I can’t seem to find the correct formula that doesn’t throw off the whole look of the cursor.