如何在 Win2D 中旋转矩形

Question

我正在寻找一种使用 Win2D 围绕其中心点旋转矩形图像（或任何图像）的方法。

此片段来自 Win2D 的 OnDraw 方法 canvas:

var redBitMap = _images[1];
var yellowBitMap = _images[2];

var rect = new Rect(topLeft.X, topLeft.Y, _width, _height);
_drawingSession.DrawImage(redBitMap, rect);

ICanvasImage image = new Transform2DEffect
{
   Source = yellowBitMap,
   TransformMatrix = Matrix3x2.CreateRotation((float)(60 * Math.PI / 180)),
};
var sourceRect = image.GetBounds(_drawingSession);
_drawingSession.DrawImage(image, rect), sourceRect, 1, CanvasImageInterpolation.HighQualityCubic);

此方法使我的图像旋转了 60 度，但图像最终绘制在错误的坐标、倾斜且小于预期图像。

有趣的是，如果我将矩形的大小更改为正方形（使高度与宽度相同），图像将不再倾斜。

经过深思熟虑，情况如下：

因此，黄色矩形代表我要（在中心）旋转 60 度的图像。固定在左上角的红色矩形是我旋转它时发生的情况。蓝色大框是由 image.GetBounds 语句确定的新创建的矩形。

当我尝试将图像绘制回原始坐标时，您可以从右手图像中看到它导致图像倾斜和收缩，因为源矩形的大小或形状不再与目标矩形。

如果我的几何技能更好，我肯定可以计算出新矩形的边界并将它们应用到 canvas 上的正确位置。但是，唉，对我来说高中数学已经太多年了。在一次性计算中，我确定我可以弄清楚 - 但当源图像的形状可能发生变化时就不行了。

Answer 1

这是线索：

        var scaleFactor = rect.Height / rect.Width;

        ICanvasImage image2 = new ScaleEffect
        {
            Source = image,
            Scale = new Vector2((float)scaleFactor, 1)
        };

        args.DrawingSession.DrawImage(image2, rect, sourceRect, 1, CanvasImageInterpolation.HighQualityCubic);

将此代码粘贴到最后一行。希望你会得到你想要的:)

当您尝试将一个矩形绘制到另一个具有不同宽高比的矩形时，会发生缩放（看起来像倾斜）。

Answer 2

杰特，你的建议帮助我找到了答案。我需要做的不是使用 ScaleEffect，但这正是我需要的线索。最终的绘制图像需要考虑到不断变化的大小（与 ScaleEffect 的想法非常相似。这给我留下了以下代码行：

args.DrawingSession.DrawImage(image, new Rect(topLeft.X + (_width - sourceRect.Width)/2, topLeft.Y + (_height - sourceRect.Height)/2, sourceRect.Width, sourceRect.Height), sourceRect, 1, CanvasImageInterpolation.HighQualityCubic)

如何在 Win2D 中旋转矩形

How to rotate a rectangle in Win2D

animation

uwp

win2d