如何借助Win2D实现旋转缩放图像的屏幕点击坐标转图像坐标？

阿华AIGC实验室

2026-5-14

嘿，我明白你现在的需求——把屏幕上的点击坐标转回到原始2x2像素图像的坐标，而且你不想纠结复杂的矩阵数学，直接用Win2D的工具来解决对吧？没问题，咱们一步步来：

核心思路

你之前的代码是把原始图像经过缩放→旋转→平移到中心，再加上屏幕偏移后渲染到屏幕。要反向转换，咱们只需要把这个过程倒过来：

先把屏幕点击坐标减去屏幕偏移，得到相对于图像变换后中心位置的坐标
用逆变换矩阵把这个坐标转回到原始图像的坐标空间
把转换后的坐标映射到对应的像素位置

具体实现步骤

1. 计算逆变换矩阵

Win2D的Matrix3x2自带Invert方法，直接用它生成你之前transformation矩阵的逆矩阵就行，完全不用手动计算矩阵细节：

// 保留你原来的变换矩阵计算逻辑
Matrix3x2 rotateMatrix = Matrix3x2.CreateRotation((float)(Rotation * Math.PI / 180));
Matrix3x2 scaleMatrix = Matrix3x2.CreateScale(Scale);
Matrix3x2 translationMatrix = Matrix3x2.CreateTranslation(-(float)layer.Height / 2, -(float)layer.Width / 2);
Matrix3x2 transformation = translationMatrix * rotateMatrix * scaleMatrix;

// 计算逆变换矩阵，同时处理缩放为0的极端情况（矩阵不可逆）
Matrix3x2 inverseTransformation;
if (!Matrix3x2.Invert(transformation, out inverseTransformation))
{
    // 这里可以加个提示，比如编辑器里限制Scale不能为0，避免走到分支
    return (-1, -1);
}

2. 转换屏幕点击坐标到图像空间

假设用户点击的屏幕坐标是screenX和screenY（比如你例子里的300,400），按以下步骤转换：

// 第一步：去掉屏幕偏移，得到相对于图像中心的变换后坐标
Vector2 screenPos = new Vector2(screenX, screenY);
Vector2 transformedPos = screenPos - new Vector2(OffsetX, OffsetY);

// 第二步：用逆矩阵“还原”变换，得到原始图像空间的坐标
Vector2 imageSpacePos = Vector2.Transform(transformedPos, inverseTransformation);

3. 映射到原始像素坐标

你的2x2图像中，每个像素占据1x1的坐标范围（比如像素(0,0)对应x∈[0,1)、y∈[0,1)；像素(0,1)对应x∈[0,1)、y∈[1,2)）。我们只需要对转换后的坐标取整数部分，再做边界检查就能得到对应的像素索引：

// 取坐标的整数部分，对应像素索引
int pixelX = (int)Math.Floor(imageSpacePos.X);
int pixelY = (int)Math.Floor(imageSpacePos.Y);

// 确保坐标在原始图像的有效范围内（0到1，因为是2x2像素）
pixelX = Math.Clamp(pixelX, 0, layer.Width - 1);
pixelY = Math.Clamp(pixelY, 0, layer.Height - 1);

完整示例代码

把这些逻辑整合到一个方法里，方便调用：

public (int PixelX, int PixelY) ScreenToImagePixel(float screenX, float screenY, float Rotation, float Scale, float OffsetX, float OffsetY, Layer layer)
{
    // 构建正向变换矩阵
    Matrix3x2 rotateMatrix = Matrix3x2.CreateRotation((float)(Rotation * Math.PI / 180));
    Matrix3x2 scaleMatrix = Matrix3x2.CreateScale(Scale);
    Matrix3x2 translationMatrix = Matrix3x2.CreateTranslation(-(float)layer.Height / 2, -(float)layer.Width / 2);
    Matrix3x2 transformation = translationMatrix * rotateMatrix * scaleMatrix;

    // 计算逆变换矩阵
    Matrix3x2 inverseTransformation;
    if (!Matrix3x2.Invert(transformation, out inverseTransformation))
    {
        // 处理缩放为0的异常情况，返回无效坐标或提示用户
        return (-1, -1);
    }

    // 转换屏幕坐标到图像空间
    Vector2 screenPos = new Vector2(screenX, screenY);
    Vector2 transformedPos = screenPos - new Vector2(OffsetX, OffsetY);
    Vector2 imageSpacePos = Vector2.Transform(transformedPos, inverseTransformation);

    // 映射到像素坐标并做边界检查
    int pixelX = Math.Clamp((int)Math.Floor(imageSpacePos.X), 0, layer.Width - 1);
    int pixelY = Math.Clamp((int)Math.Floor(imageSpacePos.Y), 0, layer.Height - 1);

    return (pixelX, pixelY);
}