在旋转后获取div角点像素位置

问题描述

在设置旋转弧度/度之后，如何计算div的左上角，左下角，右上角，右下角像素位置？

$ b $

这解决了我在旋转后计算新像素位置的问题。我创建了一个要使用的函数，传入x / y位置，div的半宽/高度和新的旋转角度。

  function getPixelsByAngle（x，y，halfWidth，halfHeight，angle）{
 var bounds = [
 // left left 
 [x +（halfWidth） - （halfHeight）* Math.sin（angle）+ halfWidth，y +（halfHeight）* Math.cos（angle）+（halfWidth）* Math.sin（angle）+ halfHeight]，
 // upper right 
 [x  - （halfWidth）* Math.cos（angle） - （halfHeight）* Math.sin（angle）+ halfWidth，y +（halfHeight）* Math.cos（angle） - （halfWidth）* Math.sin （angle）+ halfHeight]，
 //右下角
 [x  - （halfWidth）* Math.cos（angle）+（halfHeight）* Math.sin（angle）+ halfWidth，y- ）* Math.cos（angle） - （halfWidth）* Math.sin（angle）+ halfHeight]，
 //左下角
 [x +（halfWidth） halfHeight）* Math.sin（angle）+ halfWidth，y  - （halfHeight）* Math.cos（angle）+（halfWidth）* Math.sin（angle）+ halfHeight] 
]; 
 return bounds; 
} 
  

how can i calculate top-left, bottom-left, top-right, bottom-right pixel positions of a div after you have set a rotation radian/degree on it?

An example would be helpful.

解决方案

This solved my issue with calculating new pixel positions after rotating. I created a function to be used, passing in the x/y position, half width/height of the div and the new rotation angle.

function getPixelsByAngle(x,y,halfWidth,halfHeight,angle){
   var bounds = [
      //upper left
      [x + (halfWidth) * Math.cos(angle) - (halfHeight) * Math.sin(angle) + halfWidth, y + (halfHeight) * Math.cos(angle) + (halfWidth) * Math.sin(angle) + halfHeight],
      //upper right
      [x - (halfWidth) * Math.cos(angle) - (halfHeight) * Math.sin(angle) + halfWidth, y + (halfHeight) * Math.cos(angle) - (halfWidth) * Math.sin(angle) + halfHeight],
      //bottom right
      [x - (halfWidth) * Math.cos(angle) + (halfHeight) * Math.sin(angle) + halfWidth, y - (halfHeight) * Math.cos(angle) - (halfWidth) * Math.sin(angle) + halfHeight],
      //bottom left
      [x + (halfWidth) * Math.cos(angle) + (halfHeight) * Math.sin(angle) + halfWidth, y - (halfHeight) * Math.cos(angle) + (halfWidth) * Math.sin(angle) + halfHeight]
   ];
   return bounds;
}

这篇关于在旋转后获取div角点像素位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！