Knob math sample

Get x,y based on 0 angle even when knob is rotated

by blessenm

HTML

<input type="button" value="Get Coords"/>
<div id="knob"></div>

CSS

#knob {
    width:256px;
    height:256px;    
    background-image:url('http://anga-hp.com/anga-new-web/ImageFiles/Icons/defaulticon-png/256x256/MD-knob-alt.png');
    background-color:red;
    margin:200px;
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
}

JavaScript

document.querySelectorAll('input')[0].addEventListener('click',function() {
    var x = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().left),
        y = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().top)
    alert('x: '+x+', y: '+y);
    
    //Alerts x: 208, y: 234 when angle is 0. Need to get this value all the time irrespective of the rotation.
});