0
190
VistasCómo obtener la posición TopLeft, TopRight, BottomLeft, BottomRight y CentreTop de Canvas Rect
Básicamente, estoy tratando de obtener las posiciones TopLeft, TopRight, BottomLeft, BottomRight y TopMiddle para mi rect que se ha agregado al lienzo. Muéstrame de tal manera que se aplique a cualquier cambio de tamaño que pueda ocurrir en el rect. No para el tamaño específico actual.
HTML:
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.rect(20, 20, 150, 100); ctx.stroke(); </script>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Lo que necesita se puede calcular usando Element.getBoundingClientRect() y la información de dibujo de rect en relación con el lienzo.
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); var rectLeft = 20; var rectTop = 20; var rectRight = 150; var rectBottom = 100; ctx.rect(rectLeft, rectTop, rectRight, rectBottom); ctx.stroke(); var boundingRect = c.getBoundingClientRect(); //TopLeft, TopRight, BottomLeft, BottomRight, and TopMiddle console.log("TopLeft", `(${boundingRect.top + rectTop},${boundingRect.left + rectLeft})`) console.log("TopRight", `(${boundingRect.top + rectTop},${boundingRect.left + rectRight})`) console.log("BottomLeft", `(${boundingRect.top + rectBottom},${boundingRect.left + rectLeft})`) console.log("BottomRight", `(${boundingRect.top + rectBottom},${boundingRect.left + rectRight})`) console.log("TopMiddle", `(${boundingRect.top + rectTop},${boundingRect.left + (rectLeft + rectRight)/2})`) //console.log(boundingRect) <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta