具有非方形像素的图像旋转的宽度/高度缩放

Posted

技术标签:

【中文标题】具有非方形像素的图像旋转的宽度/高度缩放【英文标题】:Width/height scaling for image rotation with non-square pixels 【发布时间】:2020-11-15 06:27:49 【问题描述】:

我正在使用 Kivy 框架在 Python 中开发一个 GUI。我的 GUI 包含一个 windrose,其中一个箭头(包含在 png 图像中)围绕一个圆圈旋转以指示当前的风向。风玫瑰是圆形的,但是因为我使用的屏幕有非方形像素,风玫瑰的实际大小是 134 像素宽 x 145.940594 像素高。考虑到非方形像素需要在垂直方向应用的因子是 220/202 = 1.089108。

这是我必须旋转包含在 png 文件(尺寸为 134 像素 x 134 像素)中的箭头的代码的 sn-p:

<WindSpeedPanel>:        # This WindSpeedPanel has dimensions of 262 pixels wide by 220 pixels high
    AnchorLayout:
        pos_hint: 'x': 65/262, 'y': 26/202
        size_hint: (134/262, 134/202) 
        anchor_x: 'center'
        anchor_y: 'center'
        Image:
            source: 'icons/windRose/arrow.png'
            size_hint: (1, 1)
            keep_ratio: 0
            allow_stretch: 1
            canvas.before:
                PushMatrix
                Rotate:
                    angle: -app.windDir
                    axis: 0, 0, 1
                    origin: self.parent.center
            canvas.after:
                PopMatrix  

我面临的问题是,当图像旋转(例如旋转 90 度)时,它会变成椭圆形,因为考虑到非方形像素需要进行宽度/高度缩放:

我可以解决旋转的两个小问题

    0 度或 180 度(无需缩放) 90 度或 270 度(宽度乘以 220/202,高度乘以 1/(220/202) - 即简单地交换尺寸)

目前,我无法解决所有中间角度所需的缩放问题。我尝试了各种带有正弦/余弦的方程来计算必要的宽度/高度比例因子,但似乎没有任何效果。我总是最终将旋转的 png 图像压缩/拉伸成椭圆。例如,在没有应用缩放的 45 度时,我看到:

有没有人知道我应该如何计算必要的宽度/高度比例因子以确保 png 图像在不考虑旋转角度的情况下保持圆形?

【问题讨论】:

【参考方案1】:

我有预感,解决方案是将宽度缩放(220/202)*abs(sin(angle)),将高度缩放(202/220)*abs(sin(angle))

angle 是一个保存角度(0 到 360 度)的变量,

sin() 用于正弦曲线,abs() 用于绝对值。

编辑:

也许更准确的解决方案是将圆(windrose)视为椭圆。

所以圆上的每个点 (x,y) 实际上是(假设圆以点 (0,0) 为中心):

x = 134 * cos(angle)

y = 145.940594 * sin(angle)

【讨论】:

我没想过把圆当作椭圆。让我试一试,看看我得到了什么。 不幸的是,使用椭圆方程的运气并不好。我尝试将宽度和高度定义为width = sqrt((134*cos(angle))^2 + (145.940594*sin(angle))^2)height = sqrt((134*cos(angle+90))^2 + (145.940594*sin(angle+90))^2)(即指向旋转方向(宽度)和旋转+90度(高度)的向量的长度),但它仍然给出了一个45度的椭圆.它完美适用于 90 度。 我不知道您的代码如何绘制风玫瑰,但风玫瑰的箭头将遵循我在回答中描述的 (x, y) 路径。希望对您有所帮助。

以上是关于具有非方形像素的图像旋转的宽度/高度缩放的主要内容,如果未能解决你的问题,请参考以下文章

图像的几何变换—平移旋转镜像缩放剪切(原理+调用函数+像素操作)

图像的几何变换—平移旋转镜像缩放剪切(原理+调用函数+像素操作)

旋转后如何获取图像的宽度和高度?

图片双线性插值算法

旋转图像并将其粘贴到左上角

html5图像旋转缩放并上传