Estoy tratando de construir una especie de punto de mira que está rodeado por un círculo que amplía una imagen para disparar con mayor precisión. El comportamiento que quiero es que la cruz, que también es el puntero de mi mouse, pueda moverse dentro del círculo y una vez que toca el borde de mi círculo desde adentro, lo mueve a la posición deseada. Por ahora, solo puedo mover mi círculo con el punto de mira fijo en el medio. ¿Podría ayudarme a moverlo dentro de mi círculo?
jQuery(document).ready(function() { var onBoxX = 0, onBoxY = 0; var circleWidth = 120; var circleHeight = 120; var circleBorderWidth = 1; var boxWidth = 500; var boxHeight = 500; var circleLeft = 0; var circleTop = 0; $(box).mousemove(function(event){ // console.log(event); onBoxX = event.clientX; onBoxY = event.clientY; circleLeft = (onBoxX - circleWidth / 2 - circleBorderWidth)/ boxWidth * 100 circleTop = (onBoxY - circleHeight / 2 - circleBorderWidth)/ boxWidth *100 $("#circle").css({left: circleLeft+'%', top: circleTop+'%'}); }); $(circle).mousemove(function(event){ console.log("circle mousemove",event.offsetX, event.offsetY); }); }) body{ margin:0px; padding:0px; font-family: 'Roboto', sans-serif; } .box{ width:500px; height:500px; background:#000000; position:relative; cursor:crosshair; overflow: hidden; } .circle { position: relative; background: black; border: solid 1px #ccc; width:120px; height:120px; border-radius: 50%; } .crosshair{ position: absolute; background-color: white; width:20px; height:20px; left:41.5%; top:41.5%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box" class="box"> <div id="circle" class="circle"> <div id="crosshair" class="crosshair"></div> </div> </div>Lo refactoricé un poco y agregué código para detectar cuándo el cursor está fuera del círculo.
jQuery(document).ready(function () { var cursorX = 0, cursorY = 0; var circleRadius = 60; var circleX = 0; var circleY = 0; function updateCursorCoords(x, y) { cursorX = x; cursorY = y; } function updateCircleCoords() { // First define if cursor is inside circle var distX = Math.abs(circleX + circleRadius - cursorX); var distY = Math.abs(circleY + circleRadius - cursorY); var dist = Math.sqrt(Math.pow(distY, 2) + Math.pow(distX, 2)); var cursorIsInside = dist < circleRadius; // And update its position only when cursor is outside of circle if (!cursorIsInside) { circleX = cursorX - circleRadius; circleY = cursorY - circleRadius; } } function drawCircle() { $("#circle").css({ left: circleX + "px", top: circleY + "px" }); } $(box).mousemove(function (event) { updateCursorCoords(event.clientX, event.clientY); updateCircleCoords(); drawCircle(); }); }); body { margin:0px; padding:0px; font-family: 'Roboto', sans-serif; } .box { width:500px; height:500px; background:#000000; position:relative; cursor:crosshair; overflow: hidden; } .circle { position: relative; background: black; border: solid 1px #ccc; width:120px; height:120px; border-radius: 50%; box-sizing: border-box; } .crosshair { position: absolute; background-color: white; width:20px; height:20px; left:41.5%; top:41.5%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box" class="box"> <div id="circle" class="circle"> <div id="crosshair" class="crosshair"></div> </div> </div>