Kivy中旋转图片后窗口Resize致UI布局错乱及图片位置异常求助

我看了你遇到的问题：在Kivy实现左右分栏布局后，旋转图片再调整窗口大小，图片无法保持在右侧栏中心，还会出现UI错乱。结合你的代码和运行环境，我帮你梳理出了问题根源和解决方案：

问题根源分析 #

1. 旋转指令干扰布局计算：你直接在Image的canvas.before中添加旋转指令，导致Image的布局边界被旋转后的渲染结果影响，窗口resize时Kivy的布局系统无法正确计算它的位置。
2. 无效的Resize处理：on_resize方法里的LoadIdentity()是绘图指令，直接调用不会生效；reload()只是重新加载图片，没有触发布局更新来修正位置。
3. Button布局参数错误：你给Button设置的size:1,0.5是绝对尺寸，而非相对布局的比例，这会导致菜单栏按钮显示异常。

解决方案与修改后的代码 #

下面是调整后的完整代码，我标注了关键修改点：

from kivy.app import App
from kivy.core.window import Window
from kivy.properties import NumericProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

Builder.load_string("""\
<Example>:
    orientation:"horizontal"
    BoxLayout:
        orientation:"vertical"
        size_hint:0.5,1  # 左侧菜单栏占窗口宽度50%
        canvas.before:
            Color:
                rgba: 0, 0, 0.5, 1
            Rectangle:
                pos: self.pos
                size: self.size
        Button:
            size_hint:1,0.5  # 修改为size_hint，确保按钮占菜单栏高度的50%
            text: "按钮1"
        Button:
            size_hint:1,0.5
            text: "按钮2"
    FloatLayout:
        id: near_layout
        pos_hint: {'x':0.5,'y':0}
        size_hint:0.5,1
        canvas.before:
            Color:
                rgba: 0, 1, 0, 1
            Rectangle:
                pos: self.pos
                size: self.size
        # 新增AnchorLayout包裹Image，确保图片始终居中
        AnchorLayout:
            id: img_container
            pos: near_layout.pos
            size: near_layout.size
            canvas.before:
                Rotate:
                    angle: root.angle
                    axis: 0,0,1
                    origin: self.center  # 以容器中心为旋转原点
            Image:
                id: img
                size_hint: 0.8, 0.8  # 图片占容器的80%大小，自适应窗口
                source: 'kivy.jpeg'
""")

class Example(App, BoxLayout):
    angle = NumericProperty(0)
    
    def build(self):
        Window.bind(on_resize=self.on_resize)
        return self
    
    def on_resize(self, obj, x, y):
        # 窗口resize时，同步容器的位置和尺寸，确保布局正确
        self.ids.img_container.pos = self.ids.near_layout.pos
        self.ids.img_container.size = self.ids.near_layout.size
    
    def on_touch_move(self, touch):
        # 使用Kivy内置的touch.distance简化角度增量计算，更高效
        self.angle += touch.distance
        print(f"pos:{self.ids.near_layout.pos}, size:{self.ids.near_layout.size}")

if __name__ == "__main__":
    Example().run()

关键修改说明 #

1. 用AnchorLayout包裹Image：AnchorLayout会自动将内部的Image保持在中心位置，旋转时以AnchorLayout的中心为原点，避免图片偏移。
2. 旋转应用到容器而非Image：将Rotate指令放在AnchorLayout的canvas中，这样布局系统仍能基于AnchorLayout的原始尺寸计算位置，不受旋转影响。
3. 修正Button的布局参数：把size改为size_hint，让按钮自适应菜单栏的大小，避免UI错乱。
4. 简化角度计算：使用touch.distance直接获取鼠标移动的距离，替代手动计算平方根的操作，代码更简洁高效。
5. 有效处理窗口Resize：移除无效的LoadIdentity()和reload()，改为同步AnchorLayout的位置和尺寸，确保窗口变化时布局实时更新。

你运行修改后的代码后，旋转图片再调整窗口大小，图片会始终保持在右侧栏的中心位置，UI也不会出现错乱了。

内容的提问来源于stack exchange，提问作者user2058374