Draw Circle Compass

HTML
<div id="container" onmousedown="start()" onmouseup="stop()" onmousemove="trascina()"> <div class="target"><h2>Click <br> & <br> Drag</h2></div> <div id="selettore" class="selettore" style="display: none;"> <div class="line"></div> </div> <span class="raggio" id="raggio"></span> </div>
CSS
html, body { margin: 0; padding: 0; overflow: hidden; } #container { width: 100%; height: 100%; position: absolute; background: #111; } #container .target { position: absolute; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); top: 0; bottom: 0; margin: auto; margin-left: 5vw; text-align: center; } #container .target h2 { font-family: 'Roboto'; color: rgba(0, 0, 0, 0.7); font-size: 60px; font-weight: 300; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; } .selettore { z-index: 100; border: 2px solid rgba(0, 0, 0, 0.7); position: fixed; border-radius: 50%; top: 0; left: 0; } .selettore .line { position: fixed; top: 0; left: 0; width: 0; height: 1px; background: rgba(0, 0, 0, 0.6); -webkit-transform-origin: bottom left; transform-origin: bottom left; display: none; } .raggio { position: absolute; color: rgba(0, 0, 0, 0.8); font-size: 10em; font-family: 'Roboto'; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; }
JAVASCRIPT
var isMoving = false; var beginX = 0; var beginY = 0; var selectorX = 0; var selectorY = 0; var nowX = 0; var nowY = 0; var partenzaselettoreX; var partenzaselettoreY; var raggioX = 0; var raggioY = 0; var currentID = 0; var posCircleX = 0; var posCircleY = 0; var dist = 0; $(document).ready(function(){ $("#container").mousedown(function(){ isMoving = true; beginX = window.event.clientX; beginY = window.event.clientY; }); $("#container").mousemove(function(){ if(isMoving){ nowX = window.event.clientX; nowY = window.event.clientY; selectorX = Math.abs(beginX - nowX); selectorY = Math.abs(beginY - nowY); dist = Math.sqrt((selectorY*selectorY)+(selectorX*selectorX)); var sin = selectorY/dist; var radians = Math.asin(sin); var degrees = radians*(180/Math.PI); raggioX = nowX; raggioY = nowY; if (nowX>=beginX && nowY<beginY) { //quadrant 4 degrees=360-degrees; } if (nowX<beginX && nowY<beginY) { //quadrant 3 degrees=180+degrees; raggioX = nowX - selectorX; } if (nowX<beginX && nowY>beginY) { //quadrant 2 degrees=180-degrees; raggioX = nowX - selectorX; } document.getElementById("raggio").innerHTML = Number((dist/2).toFixed(2)); $(".line").show(); $(".line").css("width",dist/2).css("transform", "rotateZ(" + degrees + "deg)").css("margin-left",beginX).css("margin-top",beginY); $(".raggio").show().css("margin-top",raggioY).css("margin-left",raggioX); posCircleX = beginX - (dist/2); posCircleY = beginY - (dist/2); $("#selettore").show().css("margin-top",posCircleY).css("margin-left",posCircleX).css("width",dist).css("height",dist); } }); $("#container").mouseup(function(){ isMoving = false; $(".raggio").hide(); $("#selettore").hide(); $("#container").append("<div class='selettore' id='selettore" + currentID + "'></div>"); var r = Math.floor((Math.random() * 255) + 1); var g = Math.floor((Math.random() * 255) + 1); var b = Math.floor((Math.random() * 255) + 1); $("#selettore" + currentID).css("margin-top",posCircleY).css("margin-left",posCircleX).css("width",dist).css("height",dist).css("border-color", "rgba(" + r + "," + g + "," + b + ",1)").css("background","rgba(" + r + "," + g + "," + b + ",0.2)"); currentID++; }); }); function toDegrees (angle) { return angle * (180 / Math.PI); }
Expand for more options Login