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);
}
