Как перевести и повернуть изображение

Question

Я хочу повернуть, а затем переместить изображение в 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;
}

или 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

Вы просто вращаете «картинку», но не ее основу. Поэтому, если вы хотите переместить изображение с помощью Canvas.GetLeft / GetTop, оно ведет себя так, как будто оно еще не повернуто. Таким образом, если вы установите верхний / левый угол, фактический угол повернутого изображения не будет расположен там, где я хотел. На https://wpf.2000things.com/2013/03/08/772-use-rendertransformorigin-to-change-center-point-for-rotation-transforms/, на картинке видно, что я имею в виду. Как я могу повернуть «базу» с фактическим изображением? Я видел, что это возможно в WinForms, но (как) это работает в WPF? Заранее спасибо, если что-то неясно / неправильно, я отредактирую свой вопрос.

редактирование: https://i.stack.imgur.com/tqhKw.png Вы можете увидеть две стрелки. Это мои изображения. Я повернул их в центре с помощью вышеупомянутого MouseWheelEvent. На правом сайте есть моя вкладка движения. Вы можете изменить скорость (флажок после «Geschwindigkeit»), а затем вы можете повернуть налево в одной секции (где - 0 °, | - 22,5 ° и || - 45 °, а раздел - 69 точек на холсте). или вправо и в конечном итоге в новом месте.

Answer 1

Вы должны использовать координаты относительно Canvas для преобразования элемента Image.

С этим изображением на холсте

<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>

код будет выглядеть так, как показано ниже.

Важной частью является использование e.GetPosition(canvas), а не установка свойств дочернего элемента Canvas.Left, Canvas.Top и RenderTransformOrigin. Все преобразования выполняются с одной матрицей в ее RenderTransform.

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;
}