0
173
Vistascompruebe si el círculo está suspendido HTML5 Canvas
Quiero hacer un estado flotante para el círculo en el lienzo. Esto es lo que tengo
Código:
let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') let circle = { x: 100, y: 100, r: 30 } ctx.beginPath() ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2) ctx.strokeStyle = "#aaa" ctx.lineWidth = 3 ctx.stroke() ctx.closePath() this.canvas.addEventListener('mousemove', e => { let rect = this.canvas.getBoundingClientRect() let position = { x: e.clientX - rect.left, y: e.clientY - rect.top, } if(position.x > circle.x - circle.r && position.x < circle.x + circle.r && position.y < circle.y + circle.r && position.y > circle.y - circle.r ) { this.canvas.style.cursor = 'pointer' } else { this.canvas.style.cursor = 'default' } }) <canvas id="canvas" />Pero en el código anterior, flotará como si el círculo fuera un cuadrado.
Aplicará el estado de desplazamiento fuera del círculo, en cada esquina del cuadrado. Creo que es debido a las condiciones if en este fragmento de código:
if(position.x > circle.x - circle.r && position.x < circle.x + circle.r && position.y < circle.y + circle.r && position.y > circle.y - circle.r ) { this.canvas.style.cursor = 'pointer' }¿Alguien tiene una solución para hacer que el estado de desplazamiento funcione exactamente dentro del círculo?
·
Juan Pablo Isaza
Responde la pregunta