Kivy组件旋转后自身与内部Image位置错位问题如何解决

问题根因 #

你遇到的错位问题来自Kivy的两个核心机制特性：

• Canvas的矩阵变换（旋转、平移、缩放）仅作用于绘制逻辑，不会修改组件本身的pos、size属性，也不会改变子组件的默认布局坐标系、原生碰撞检测的计算规则
• 你当前的旋转原点origin仅在初始化时取值一次，组件位置移动后原点不会同步更新，导致旋转中心偏移

具体解决方案 #

方案1：修复手动矩阵变换的逻辑 #

1. 动态绑定旋转原点，保证组件位置变化时旋转中心同步更新

from kivy.graphics import PushMatrix, PopMatrix, Rotate

# 初始化时保存Rotate实例
with self.canvas.before:
    PushMatrix()
    self.rotation_inst = Rotate(origin=self.center, angle=90)
with self.canvas.after:
    PopMatrix()

# 绑定center属性变化时自动更新旋转原点
self.bind(center=lambda inst, new_center: setattr(self.rotation_inst, "origin", new_center))

2. 修正子组件定位逻辑
   子组件默认锚点为左下角，要让子组件和父组件中心对齐，需要按如下公式设置位置，建议也做绑定保证动态更新：

def update_child_pos(self, inst, val):
    child = self.children[0]
    child.pos = (self.center_x - child.width/2, self.center_y - child.height/2)

self.bind(center=update_child_pos)
self.children[0].bind(size=update_child_pos)

3. 重写碰撞检测方法适配旋转逻辑
   默认的collide_point是轴对齐矩形检测，旋转后需要对检测点做逆变换再校验：

import math

def collide_point(self, x, y):
    cx, cy = self.center
    # 计算负角度做逆旋转，转换回原始坐标系
    rad = -math.radians(self.rotation_inst.angle)
    # 坐标平移到旋转原点
    tx, ty = x - cx, y - cy
    # 逆旋转变换
    rx = tx * math.cos(rad) - ty * math.sin(rad) + cx
    ry = tx * math.sin(rad) + ty * math.cos(rad) + cy
    # 调用原始矩形碰撞校验
    return super().collide_point(rx, ry)

方案2：直接使用Scatter组件简化逻辑 #

Kivy原生的Scatter组件已经封装了变换、子组件坐标系适配、碰撞检测的全部逻辑，无需手动处理矩阵：

• 把你的Image放在Scatter内部，直接修改Scatter的rotation属性即可完成旋转
• 子组件位置、碰撞检测都会自动适配旋转后的坐标系，无需额外代码
  示例用法：

from kivy.uix.scatter import Scatter
from kivy.uix.image import Image

ship = Scatter(do_scale=False, do_translate=False, do_rotation=False)
ship.add_widget(Image(source="ship.png"))
# 直接设置旋转角度即可
ship.rotation = 90

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