如何使用 ViewBox、ImageBrush 和 ScrollViewer 在 WPF 中平移和縮放帶有疊加層的圖像？

在WPF中實作影像平移與縮放

WPF 提供了一種簡單的方法，結合ViewBox、ImageBrush和ScrollViewer，創建支援影像平移、縮放和疊加功能的影像檢視器。以下是如何實現的：

1. 使用ViewBox實作平移與縮放:

ViewBox 容器可讓您縮放和定位其內部的子元素。將影像放置在ViewBox內，透過調整其Stretch和Offset屬性即可輕鬆實現影像的平移和縮放。

2. 使用ImageBrush建立疊加層:

ImageBrush 允許您將影像繪製到指定的區域。您可以建立一個ImageBrush，並將其用作放置在主影像頂部的形狀或控制項的填充，從而建立疊加層。

3. 使用ScrollViewer顯示完整影像:

如果圖片大小超過檢視器大小，可以使用ScrollViewer作為主ViewBox的父級。這樣就可以透過捲動來查看整個原始影像。

4. 平移與縮放實作:

以下範例示範如何使用ViewBox、ImageBrush和ScrollViewer實作平移和縮放：

MainWindow.xaml:

<code class="language-xml"><Window ...>
    <ScrollViewer>
        <Viewbox x:Name="PannableViewBox">
            <Image Source="myImage.jpg"/>
            <ImageBrush Opacity="0.5" x:Name="OverlayImageBrush"/>
        </Viewbox>
    </ScrollViewer>
</Window></code>

MainWindow.xaml.cs:

<code class="language-csharp">public partial class MainWindow : Window
{
    private Point _start;
    private ScaleTransform _scaleTransform;
    private TranslateTransform _translateTransform;

    public MainWindow()
    {
        InitializeComponent();

        _scaleTransform = new ScaleTransform();
        _translateTransform = new TranslateTransform();

        PannableViewBox.RenderTransform = new TransformGroup()
        {
            Children = { _scaleTransform, _translateTransform }
        };
    }

    private void PannableViewBox_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        if (Keyboard.IsKeyDown(Key.LeftCtrl))
        {
            _scaleTransform.ScaleX += e.Delta > 0 ? 0.1 : -0.1;
            _scaleTransform.ScaleY += e.Delta > 0 ? 0.1 : -0.1;
        }
    }

    private void PannableViewBox_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _start = e.GetPosition(PannableViewBox);
        PannableViewBox.CaptureMouse();
    }

    private void PannableViewBox_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        PannableViewBox.ReleaseMouseCapture();
    }

    private void PannableViewBox_MouseMove(object sender, MouseEventArgs e)
    {
        if (PannableViewBox.IsMouseCaptured)
        {
            var point = e.GetPosition(PannableViewBox);
            _translateTransform.X -= point.X - _start.X;
            _translateTransform.Y -= point.Y - _start.Y;
            _start = point;
        }
    }
}</code>

此程式碼示範如何使用ViewBox建立可平移區域，如何回應滑鼠滾輪事件進行縮放，以及如何處理滑鼠事件進行平移。您可以進一步自訂此解決方案以新增疊加層和其他功能。

以上是如何使用 ViewBox、ImageBrush 和 ScrollViewer 在 WPF 中平移和縮放帶有疊加層的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！