En JS, podríamos usar Element.getBoundingClientRect() para obtener las coordenadas X e Y del elemento. Pero, ¿qué pasa si queremos saber las coordenadas X, Y de un elemento en el lienzo?
Lo más cercano en lo que podría pensar es CanvasRenderingContext2D.isPointInPath() para verificar que no exista un punto en la forma. ¿Hay una función integrada o alguna forma de obtener las coordenadas X e Y de una forma en el lienzo?
Por ejemplo,
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); canvas{ width:200px; height:200px; background:red; } <canvas></canvas>Cualquier respuesta será appreicated.
Las coordenadas que usa para especificar el rect comienzan con el par x/y para la esquina superior izquierda del rect en relación con el lienzo .
Uno esperaría que las coordenadas de la pantalla se obtuvieran agregando el valor rect 'sx al valor canvas.getBoundingClientRect().left para la coordenada x de la pantalla, y el valor y agregado al valor canvas.getBoundingClientRect().top daría el coordenada y.
Si está agregando formas al rect usando js, sería relativamente fácil realizar un seguimiento de la parte superior izquierda de cada una de las variables y calcular las coordenadas de la pantalla a medida que avanza.
como un medio aproximado y listo para obtener (manualmente) una estimación razonable de cualquier punto, se podría usar un eventListener de un simple clic para informar las coordenadas de los puntos en los que hace clic:
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); canvas.addEventListener ('click', event => { console.log(`x: ${event.screenX}, y: ${event.screenY}`) }) <canvas width="200px" height="200px" style="background:red"></canvas>Creo que es bastante simple. Donde haces tu caja como esta; ctx.rect(10, 10, 100, 100); , En cambio haz esto;
var x = 10; var y = 10; ctx.rect(x, y, 100, 100); Luego puede moverlo como quiera y saber dónde está, por ejemplo, document.getElementById("demo").innerHTML = "x:" + x + "y:" + y; al final de su código y luego coloque <p id="demo"></p> en la parte html. Si desea que se actualice en tiempo real, intente usar requestAnimationFrame , pero primero intente ponerlo en una función.