Get x,y coord of a div when rotation is 0

Question

Hi I need some help with math for my problem. I have a situation where I need to access the left,top coord of a div whenever a touchstart event is fired. But I need to get it based on the rotation of the div being 0 degree.

I have attached a fiddle which shows my condition. Right now when you press the button, the value is 'x:169, y:195'. But I am looking for some formula to get 'x: 208, y: 234'

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.
     */
});

Is that possible? I did a lot of search but couldn't find the apt answer. And my math isn't good enough to modify the formulas for the other answers in SO.

the general formula for the coordinates of a point after rotation is `x' = x * Cos(A) - y * Sin(A); y' = x * Sin(A) + y * Cos(A)` (http://en.wikipedia.org/wiki/Rotation_(mathematics)). the center of your rotation is the center of the square, so you will need to express your coordinates using the center of rotation as the origin. The value `A` is your angle in radians: `22 * Math.PI / 180`. — akonsu, May 28 '13 at 03:54
If you don't have access to the value of the rotation angle besides accessing it through the styling, you will have to convert the matrix it returns into radians (before you pass it to the formula that akonsu has provided). Here's a question related to that, the answer is a function that returns degrees so I guess you'll have to convert: http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery — Nile, May 28 '13 at 04:00

score 1 · Accepted Answer · answered May 28 '13 at 10:32

Note that the centre of the red square will not change when rotated. So we can find its coordinates first (by taking averages), then figure out the top left corner (based off the fact that the size of the red square is given beforehand; in this case, it was 256x256). Here's a simple implementation:

document.querySelectorAll('input')[0].addEventListener('click',function() {
var left = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().left),
    right = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().right),
    top = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().top),
    bottom = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().bottom),
    x_mid = (left+right)/2.0,
    y_mid = (top+bottom)/2.0,
    x = x_mid - 256/2, // Subtract by half the knob's width.
    y = y_mid - 256/2  // Subtract by half the knob's height.
alert('left: '+left+', right: '+right+', top: '+top+', bottom: '+bottom+'\n'
      +'centre: ('+x_mid+', '+y_mid+')\n'
      +'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.
});

score 0 · Answer 2 · answered Sep 22 '13 at 13:28

Use this code for any figure

document.querySelectorAll('input')[0].addEventListener('click', function () {

var left = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().left),
    right = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().right),
    top = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().top),
    bottom = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().bottom),
    width = Math.round(document.querySelectorAll('#knob')[0].offsetWidth),
    height = Math.round(document.querySelectorAll('#knob')[0].offsetHeight),        
    x_mid = (left + right) / 2.0,
    y_mid = (top + bottom) / 2.0,
    x = x_mid - width / 2, // Subtract by half the knob's width.
    y = y_mid - height / 2 // Subtract by half the knob's height.
alert('left: ' + left + ', right: ' + right + ', top: ' + top + ', bottom: ' + bottom + '\n' + 'centre: (' + x_mid + ', ' + y_mid + ')\n' +'dimen; w:' +width + ',h:'+ height + 'x: ' + x + ', y: ' + y);
});

Get x,y coord of a div when rotation is 0

2 Answers2