Tengo un problema en el que intento crear un cursor/punto de mira personalizado dentro de mi lienzo. El problema que tengo es que la longitud, el ancho y el espacio especificados dados a los cuatro rectángulos para formar el cursor producen la cantidad incorrecta de píxeles para el espacio central.
Caja de arena de código en vivo: https://codesandbox.io/s/nifty-resonance-bcl0m
En el ejemplo anterior, medir la longitud y el ancho de los cursores es la cantidad correcta, pero el espacio central da 10 píxeles en lugar de 6 píxeles (espacio * 2). Sé que el problema debe deberse a cómo calculo las posiciones X/Y de cada rectángulo, pero parece que no puedo encontrar la fórmula correcta que no elimine el aspecto completo del cursor.
está sucediendo porque estás calculando la brecha dos veces:
tu codigo:
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>al calcular la longitud horizontal que está haciendo: (ancho / 2) + espacio == (4/2) + 3 = 5. puede eliminar el ancho del cálculo para tener un espacio de 6