Skip to content

Instantly share code, notes, and snippets.

@syuilo

syuilo/calcCircleScale

Created November 6, 2015 02:50
Show Gist options
  • Save syuilo/c04358773a34407fed32 to your computer and use it in GitHub Desktop.
Save syuilo/c04358773a34407fed32 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calcCircleScale
<!doctype html>
<html>
<head>
<meta charse=utf-8>
<style>
#box {
position: fixed;
top: 200px;
left: 400px;
width: 300px;
height: 300px;
background: #f00;
}
#ripple {
position: fixed;
top: 0;
left: 0;
width: 2px;
height: 2px;
background: rgba(0, 0, 255, 0.5);
border-radius: 100%;
pointer-events: none;
}
</style>
</head>
<body>
<div id='box'></div>
<div id='ripple'></div>
<script>
////////////////////////////////
function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) {
// Exapmle
var zure = Math.pow((circleCenterX - (boxW / 2)) * (circleCenterX - (boxW / 2)) + (circleCenterY - (boxH / 2)) * (circleCenterY - (boxH / 2)), 0.5);
return (Math.max(boxW, boxH) * Math.sqrt(2)) + (zure * Math.sqrt(2) * Math.sqrt(2));
}
////////////////////////////////
document.getElementById('box').addEventListener('mousemove', function(event) {
var boxW = event.target.clientWidth;
var boxH = event.target.clientHeight;
var circleCenterX = event.pageX - event.target.offsetLeft;
var circleCenterY = event.pageY - event.target.offsetTop;
var scale = calcCircleScale(boxW, boxH, circleCenterX, circleCenterY);
var ripple = document.getElementById('ripple');
ripple.style.top = (event.pageY - 1).toString() + 'px';
ripple.style.left = (event.pageX - 1).toString() + 'px';
ripple.style.transform = 'scale(' + (scale / 2) + ', ' + (scale / 2) + ')';
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment