javascript在旋轉元素中找到相同位置

Question

我有一個“基本”參考矩形（紅色）

在旋轉的div（#map）內，我需要一個克隆rect（黃色），它的大小和位置必須與“基本” rect相同，而與父級（#map）的旋轉無關。

到目前為止，這是我的所在地，歡迎任何幫助。

http://codepen.io/christianpugliese/pen/oXKOda

var controls = { degrees: 0, rectX:125, rectY:55 };

var wBounds = document.getElementById("wrapper").getBoundingClientRect(),
    mapBounds = document.getElementById("map").getBoundingClientRect(),
    rectBounds = document.getElementById("rect").getBoundingClientRect();

   var _x = ((mapBounds.width - wBounds.width) / 2) +   $('#rect').position().left,
       _y = ((mapBounds.height - wBounds.height) / 2) + $('#rect').position().top;

  $('#rect').css({top: controls.rectY+'px', left:controls.rectX+'px'});

  $('#mapRect').width(rectBounds.width);
  $('#mapRect').height(rectBounds.height);
  $('#mapRect').css({top: _y+'px',
                     left:_x+'px',
                    'transform': 'rotate('+ Math.round(-controls.degrees) +'deg)'});

  $('#map').css('transform', 'rotate('+ Math.round(controls.degrees) +'deg)');

Answer 1

由於您將#mapRect沿相反的方向旋轉相等的量，因此您將獲得正確的旋轉/方向而不是原點。 transform-origin將是#mapBounds的中心，但相對於#rect ；

筆叉： http : //codepen.io/MisterCurtis/pen/vNBYZJ?editors=101

由於存在一些舍入/子像素定位，因此黃色矩形無法完美對齊像素。

function updateUI(){
  var _x = ((mapBounds.width - wBounds.width) / 2) + $('#rect').position().left,
  _y = ((mapBounds.height - wBounds.height) / 2) + $('#rect').position().top,
  _ox = mapBounds.width/2 - _x, // origin x
  _oy = mapBounds.height/2 - _y; // origin y

...

  $('#mapRect').css({
    'transform-origin': _ox + 'px ' + _oy + 'px', // now it rotates by the bounds
    top: _y + 'px',
    left: _x + 'px',
    'transform': 'rotate(' + Math.round(-controls.degrees) + 'deg)'
  });
}

編輯：更新了筆 。 您將不得不使用Rectangle來代替，而使用Polygon。 這樣，您可以使用https://github.com/ahmadnassri/google-maps-polygon-rotate這樣的插件沿地圖中心執行旋轉。