Created
December 8, 2016 23:21
-
-
Save anderflash/3da1e175da3311cd6e5bc3af8ca8af13 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> | |
<title></title> | |
</head> | |
<body> | |
<svg width=500 height=500 id="svg"> | |
<circle id="bigcircle" r=100 cx="250" cy="250" fill="none" stroke-width="2px" stroke="blue"/> | |
<circle id="smallcircle" r=10 cx="370" cy="250" fill="blue"/> | |
<line id="line" x1="250" y1="250" x2="350" y2="250" stroke-width="2px" stroke="blue" stroke-dasharray="10 10"/> | |
<line id="linebase" x1="250" y1="250" x2="350" y2="250" stroke-width="2px" stroke="blue"/> | |
<text id="text" x="350" y="250" fill="blue" text-anchor="middle">0</text> | |
<path id="arc1" fill="rgba(0,0,255,0.5)" stroke="none" d="M350 250 A 100 100, 0, 0, 0, 350 250 L 250 250 Z"/> | |
</svg> | |
<script type="text/javascript"> | |
var bc = document.getElementById("bigcircle"); | |
var sc = document.getElementById("smallcircle"); | |
var ln = document.getElementById("line"); | |
var svg = document.getElementById("svg"); | |
var arc1= document.getElementById("arc1"); | |
var text= document.getElementById("text"); | |
var rbc = 100; | |
var rsc = 140; | |
var rtext= 120; | |
var pressed = false; | |
sc.addEventListener("mousedown", (event)=>{ | |
pressed = true; | |
}); | |
svg.addEventListener("mouseup", (event)=>{ | |
pressed = false; | |
}); | |
svg.addEventListener("mousemove", (event)=>{ | |
if(pressed){ | |
var x = event.clientX - 250; | |
var y = event.clientY - 250; | |
var mag = Math.sqrt(x*x+y*y); | |
sc.cx.baseVal.value = x/mag * rsc + 250; | |
sc.cy.baseVal.value = y/mag * rsc + 250; | |
ln.x2.baseVal.value = x/mag * rbc + 250; | |
ln.y2.baseVal.value = y/mag * rbc + 250; | |
var angle = ((-Math.atan2(y,x)/Math.PI * 180 + 360) % 360); | |
text.innerHTML = angle.toFixed(0); | |
text.x.baseVal[0].value = x/mag * rtext + 250; | |
text.y.baseVal[0].value = y/mag * rtext + 250; | |
if(angle <= 180.0){ | |
arc1.setAttribute("d","M350 250 A 100 100, 0, 0, 0, " + ln.x2.baseVal.value + " " + ln.y2.baseVal.value + " L 250 250 Z"); | |
}else{ | |
arc1.setAttribute("d","M" + ln.x2.baseVal.value + " " + ln.y2.baseVal.value + " A 100 100, 0, 1, 1, 350, 250 L 250 250 Z"); | |
} | |
} | |
}); | |
var tl = new TimelineMax(); | |
tl.to(svg, 8, {opacity:1}); | |
</script> | |
<style type="text/css"> | |
body,html{ | |
margin:0; | |
padding:0; | |
} | |
#text{ | |
pointer-events: none; | |
cursor: normal; | |
user-select:none; | |
} | |
#svg{ | |
opacity: 0; | |
} | |
</style> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment