Question

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

一个例子会有所帮助。

Answer 1

假设相对于中心的旋转以及相对于同一原点的四个角的坐标，(±a, ±b)和a所在的每个点b都是div的半高和半高需要乘以变换矩阵：

| cos(theta) -sin(theta) | | sin(theta) cos(theta) |

e.g：

x' = a * cos(theta) - b * sin(theta) y' = a * sin(theta) + b * cos(theta)

注意：以上是笛卡尔坐标 - 根据theta轴向下运行的DOM坐标反转y项。

Answer 2

我对这里的答案感到困惑。拒绝投票的答案肯定是错误的，但是我也为其他答案而苦恼，因为这是一个很好但很纯粹的提示。对于普通的Web开发人员而言，该示例仍然具有非常强的理论意义。因此，我结合了这两个答案，并制作了该投票示例的有效版本。因此，对于那些也在搜索有效的javascript解决方案的人。在这里：

from django.utils.html import format_html


def school(self, instance):
    school_id = instance.school.pk
    info = (School._meta.app_label, School._meta.model_name)
    url = reverse('admin:{}_{}_change'.format(*info), args=(school_id,))

    return format_html('<a href="{url}">{text}</a>'.format(
        url=url,
        text=school_id))

Answer 3

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

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角像素位置

3 个答案: