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 中国語 Web サイトの他の関連記事を参照してください。