如何僅通過“拖動”圖片來移動圖片？

因此，當您顯示圖片時，我想在 Windows 中制作一個功能，當您放大時，您只需用滑鼠移動圖片即可。我已經在我的專案中得到了縮放部分：

<ScrollViewer Name="scroll" Margin="40"
                  HorizontalScrollBarVisibility="Auto" 
                  VerticalScrollBarVisibility="Auto">
                <Canvas
                MouseWheel="Container_MouseWheel" x:Name="canvas">
                    <Viewbox>
                        <Image x:Name="img"  Source="{Binding imageSource}" Grid.ColumnSpan="2" />

                    </Viewbox>
                </Canvas>
            </ScrollViewer>

和 MouseWheel 事件中的代碼：

  var element = sender as UIElement;
        var position = e.GetPosition(element);
        var transform = element.RenderTransform as MatrixTransform;
        var matrix = transform.Matrix;
        var scale = e.Delta >= 0 ? 1.1 : (1.0 / 1.1); // choose appropriate scaling factor

        matrix.ScaleAtPrepend(scale, scale, position.X, position.Y);
        element.RenderTransform = new MatrixTransform(matrix);

但是現在我遇到了一個問題，當我縮放時，我不能只用滑鼠單擊并按住影像并移動到圖片的另一部分，如果你真的不知道我的意思，只需在視窗上打開一個影像放大然后按住滑鼠在圖片中移動。

我嘗試將這 3 個事件添加到我的畫布中，這是 3 個事件背后的代碼：

  private Image draggedImage;
    private Point mousePosition;
    private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var image = e.Source as Image;

        if (image != null && canvas.CaptureMouse())
        {
            mousePosition = e.GetPosition(canvas);
            draggedImage = image;
            Panel.SetZIndex(draggedImage, 1); // in case of multiple images
        }
    }

    private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (draggedImage != null)
        {
            canvas.ReleaseMouseCapture();
            Panel.SetZIndex(draggedImage, 0);
            draggedImage = null;
        }
    }

    private void Canvas_MouseMove(object sender, MouseEventArgs e)
    {
        if (draggedImage != null)
        {
            var position = e.GetPosition(canvas);
            var offset = position - mousePosition;
            mousePosition = position;
            Canvas.SetLeft(draggedImage, Canvas.GetLeft(draggedImage)   offset.X);
            Canvas.SetTop(draggedImage, Canvas.GetTop(draggedImage)   offset.Y);
        }
    }

但這并沒有令人遺憾地作業，有沒有人有關于如何使它作業的想法？

uj5u.com熱心網友回復：

您不應該混合布局（即設定 Canvas.Left/Top）和渲染轉換。如果您通過 RenderTransform 進行縮放，您還應該平移相同的 RenderTransform。

這是一個簡單的示例，其中 MouseMove 處理程式還操作 Image 元素的 RenderTransform。

<Canvas x:Name="canvas"
        Background="Transparent"
        MouseLeftButtonDown="CanvasMouseLeftButtonDown"
        MouseLeftButtonUp="CanvasMouseLeftButtonUp"
        MouseMove="CanvasMouseMove"
        MouseWheel="CanvasMouseWheel">
    <Image x:Name="image" Source=...>
        <Image.RenderTransform>
            <MatrixTransform/>
        </Image.RenderTransform>
    </Image>
</Canvas>

請注意，對于平移和縮放，滑鼠位置的確定方式不同，以便獲得“未縮放”的平移偏移量，但相對于影像的原點進行縮放。

private Point? mousePosition;

private void CanvasMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (canvas.CaptureMouse())
    {
        mousePosition = e.GetPosition(canvas); // position in Canvas
    }
}

private void CanvasMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    canvas.ReleaseMouseCapture();
    mousePosition = null;
}

private void CanvasMouseMove(object sender, MouseEventArgs e)
{
    if (mousePosition.HasValue)
    {
        var position = e.GetPosition(canvas); // position in Canvas
        var translation = position - mousePosition.Value;
        mousePosition = position;

        var transform = (MatrixTransform)image.RenderTransform;
        var matrix = transform.Matrix;
        matrix.Translate(translation.X, translation.Y);
        transform.Matrix = matrix;
    }
}

private void CanvasMouseWheel(object sender, MouseWheelEventArgs e)
{
    var position = e.GetPosition(image); // position in Image
    var scale = e.Delta >= 0 ? 1.1 : (1.0 / 1.1);

    var transform = (MatrixTransform)image.RenderTransform;
    var matrix = transform.Matrix;
    matrix.ScaleAtPrepend(scale, scale, position.X, position.Y);
    transform.Matrix = matrix;
}

標籤：C＃wpfxml帆布

上一篇：如何使用帶引數的字串來呼叫腳本，因為bash在解釋命令列時會這樣做？

下一篇：如何開始在VisualStudio2022中除錯新應用程式？