Question

尝试获取HTML元素的XY坐标，因此我可以计算旋转元素的角相对于另一个元素的物理距离（

）。

在代码片段中，我尝试计算内部div的左上角到外部div的中心的距离。但我只有非旋转div的值左和顶。我需要值来反映旋转div的XY点。有没有办法获得相对于视口或另一个元素的那个点？

我已尝试getBoundingClientRect()，但它提供更大的矩形和错误坐标，因为它实际上是一个包含完整旋转div的垂直框。

那么，有没有办法获得这些坐标？

＆＃13;

document.getElementById('outRotated').innerHTML = clacDistancCornerCenter() + "  Rotated distance of corner to center: "


function clacDistancCornerCenter() {
  var outer = document.getElementById('outer');
  var inner = document.getElementById('inner');

  var centerX = outer.offsetWidth / 2;
  var centerY = outer.offsetHeight / 2;


  var innersCornerX = outer.offsetLeft;
  var innersCornerY = outer.offsetTop;

  //distance formula -> d = sqrt( pow( x2 - x1)  + pow( y2 - y1) )

  var distance = Math.sqrt(Math.pow(centerX - innersCornerX, 2) + Math.pow(centerY - innersCornerY, 2));

  return distance;
}

function calcDistHorizontal() {
  $('div').css('transform', 'rotate(0deg)');
  document.getElementById('outHorizontal').innerHTML = clacDistancCornerCenter()+ "  This Should be differnt when horizontal: ";
}

＆＃13;

div {
  top: 15%;
  left: 20%;
  width: 50%;
  height: 50%;
  border: 1px solid black;
  position: absolute;
  display: block;
  transform: rotate(25deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="outRotated"> </p>
<p id="outHorizontal"> </p>

<button onclick="calcDistHorizontal()">Distance Horizontal</button>

<div id="outer">
  <div id="mid">
    <div id="inner">
    </div>
  </div>
</div>

＆＃13;

Answer 1

我找到了一个简单的解决方案，没有额外的数学......我创建了一个0px宽的新元素来表示一个点。我把它放在我要测量的角落里，然后用getBoundingClientRect（）来请求视口坐标，它返回一个矩形对象，其顶部，底部，左侧和右侧都相对于屏幕视口。由于点元素的宽度/高度为0，因此top等于bottom，left等于right。

div {
  top: 15%;
  left: 20%;
  width: 50%;
  height: 50%;
  border: 1px solid black;
  position: absolute;
  display: block;
  transform: rotate(25deg);
}
.point {
  width: 7px;
  height: 7px;
  background-color: blue;
  //border:3px solid blue;
  position: absolute;
  display: block;
}
#center {
  left: 50%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="outRotated"></p>
<p id="outRotated"> Set points width and height to 0 to get the actual correct distance. For now the points are large for easy understanding</p>

<br/>
<button onclick="relocate(true,true)">Top Left</button>-------
<button onclick="relocate(true,false)">Top Right</button>
<br/>
<button onclick="relocate(false,true)">Bottom Left</button>
<button onclick="relocate(false,false)">Bottom Right</button>
<br/>
<button onclick="horizontal()">Horizontal</button>

<div id="outer">
  <span id="center" class="point" onclick="outputXY()"></span>
  <div id="mid">
    <div id="inner">
      <span id="corner" class="point" onclick="outputXY()"></span>
    </div>
  </div>
</div>

$startDate = ($start_date ? $start_date->format($df) : '-');
setlocale(LC_ALL, 'lt_LT.UTF-8');
echo strftime($startDate);

Answer 2

数学！

如果你有一个名为Vector的点类，带有x和y属性，你可以使用这样的方法得到最终的XY坐标：

vA.getVectorRotated = function(vB, angle){
   angle = angle*Math.PI/180;
   return new Vector( (Math.cos(angle) * (this.x - vB.x)
                     - Math.sin(angle) * (this.y - vB.y) + vB.x),
                      (Math.sin(angle) * (this.x - vB.x) 
                     + Math.cos(angle) * (this.y - vB.y) + vB.y) );
};

Answer 3

要使用任何css 2d变换，您可以使用getComputedStyle并使用变换矩阵来获取变换后的坐标。

function calcElemTransformedPoint(elem, point)
{
    var style = getComputedStyle(elem);
    var transformOrigin = style.transformOrigin.split(' ').map(function(e)
    {
        // Remove 'px' and cast to number
        return +e.slice(0,-2);
    });
    var p = [point[0] - transformOrigin[0], point[1] - transformOrigin[1]];
    var transform = style.transform;
    // Matrix
    var m = [];
    if(transform.slice(0,7) === 'matrix(')
        m = transform.slice(7,-1).split(',').map(function(e){ return +e; });
    else
    {
        // 'matrix3d('
        var tmp = transform.slice(9,-1).split(',');
        m = [
            +tmp[0],
            +tmp[1],
            +tmp[4],
            +tmp[5],
            +tmp[12],
            +tmp[13]
        ];
    }
    // Matrix multiplication
    return [
        p[0] * m[0] + p[1] * m[2] + m[4] + transformOrigin[0],
        p[0] * m[1] + p[1] * m[3] + m[5] + transformOrigin[1]
    ];
}

旋转的HTML元素角的XY坐标

3 个答案:

Usage example