如何翻译和旋转图像

I want to rotate and afterwards move an image in c#. The image is in a Canvas . My problem is if you rotate the image with the following

我想旋转,然后在c#中移动图像。图像位于画布中。我的问题是如果您使用以下旋转图像

private void Schiff_OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    Image _schiff = (Image)sender;

    if (!_schiff.IsMouseCaptured) return;

    Matrix _mat = _schiff.RenderTransform.Value;
    Point _mouse = e.GetPosition(_schiff);

    if (e.Delta > 0)
    {
        _mat.RotateAtPrepend(22.5, _mouse.X, _mouse.Y);
    }
    else
    {
        _mat.RotateAtPrepend(-22.5, _mouse.X, _mouse.Y);
    }

    MatrixTransform _mtf = new MatrixTransform(_mat);
    _schiff.RenderTransform = _mtf;
}

or RotateTransform

double _angle = 0.0;

_angle += 22.5;
if (_angle == 360.0) _angle = 0.0;

RotateTransform _rotate = new RotateTransform(_angle, _schiff.Width / 2, _schiff.Height / 2);

_schiff.RenderTransform = _rotate;A

you just rotate the "picture", but not it's base. So if you want to move the image with Canvas.GetLeft/GetTop, it behaves like it is still not rotated. So if you set the Top/Left-corner, the actual corner of the rotated image isn't placed where I wanted it to be. At https://wpf.2000things.com/2013/03/08/772-use-rendertransformorigin-to-change-center-point-for-rotation-transforms/, in the picture you can see what I mean. How can I possibly rotate the "base" with the actual image? I saw it is possible in WinForms, but (how) does it work in WPF? Thanks in advance, if anything is unclear/wrong I will edit my question.

你只是旋转“图片”,但不是它的基础。因此,如果您想使用Canvas.GetLeft / GetTop移动图像,它的行为就像它仍未旋转一样。因此,如果您设置顶部/左侧角,则旋转图像的实际角落不会放置在我想要的位置。在https://wpf.2000things.com/2013/03/08/772-use-rendertransformorigin-to-change-center-point-for-rotation-transforms/,在图片中你可以看到我的意思。我怎么可能用实际图像旋转“基础”?我在WinForms中看到它是可能的,但是(如何)它在WPF中有效?在此先感谢,如果有任何不清楚/错误,我将编辑我的问题。

edit: https://i.stack.imgur.com/tqhKw.png You can see the two arrows. They are my images. I rotated them at the center with my above MouseWheelEvent. On the right site there is my movement tab. You can change the speed (the checkbox after "Geschwindigkeit") and then you can either turn left in one section (where - is 0°, | is 22.5° and || is 45° and a section is 69 points in the Canvas) or right and end up in a new location.

编辑:https://i.stack.imgur.com/tqhKw.png您可以看到两个箭头。他们是我的形象。我用我上面的MouseWheelEvent在中心旋转它们。在右侧网站上有我的移动选项卡。你可以改变速度(“Geschwindigkeit”之后的复选框),然后你可以在一个区域左转(其中 - 是0°,|是22.5°,||是45°,画面中的部分是69点)或者正确并最终到达新的位置。

1 个解决方案

#1

You should use coordinates relative to the Canvas for transforming the Image element.

您应该使用相对于Canvas的坐标来转换Image元素。

With this Image in a Canvas

在画布中使用此图像

<Canvas x:Name="canvas">
    <Image Width="100"
           Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
           MouseLeftButtonDown="OnMouseLeftButtonDown"
           MouseLeftButtonUp="OnMouseLeftButtonUp"
           MouseMove="OnMouseMove"
           MouseWheel="OnMouseWheel">
        <Image.RenderTransform>
            <MatrixTransform />
        </Image.RenderTransform>
    </Image>
</Canvas>

the code would look like shown below.

代码如下所示。

The important part is to use e.GetPosition(canvas) and not to set the child element's Canvas.Left, Canvas.Top and RenderTransformOrigin properties. All transformations are done with a single Matrix in its RenderTransform.

重要的部分是使用e.GetPosition(画布)而不是设置子元素的Canvas.Left,Canvas.Top和RenderTransformOrigin属性。所有转换都在其RenderTransform中使用单个Matrix完成。

private Point? mousePos;

private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    ((IInputElement)sender).CaptureMouse();
    mousePos = e.GetPosition(canvas);
}

private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    ((IInputElement)sender).ReleaseMouseCapture();
    mousePos = null;
}

private void OnMouseMove(object sender, MouseEventArgs e)
{
    if (mousePos.HasValue)
    {
        var element = (UIElement)sender;
        var transform = (MatrixTransform)element.RenderTransform;
        var matrix = transform.Matrix;
        var pos = e.GetPosition(canvas);
        matrix.Translate(pos.X - mousePos.Value.X, pos.Y - mousePos.Value.Y);
        transform.Matrix = matrix;
        mousePos = pos;
    }
}

private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    var element = (UIElement)sender;
    var transform = (MatrixTransform)element.RenderTransform;
    var matrix = transform.Matrix;
    var pos = e.GetPosition(canvas);
    matrix.RotateAt(e.Delta > 0 ? 22.5 : -22.5, pos.X, pos.Y);
    transform.Matrix = matrix;
}

#1