缩放和平移图像，在窗口中央放置固定标签 [英] Zoom and Pan an Image with a fixed positioned label in center of the window

问题描述

我正在使用全屏图像查看器并使用WPF来构建它。我熟悉Windows Form但从未使用过WPF。到目前为止，我已经设法制作了一个全屏窗口，并使用Grid将图像放在中心。我也可以在鼠标滚轮上缩小图像
。但是图像似乎是作为原点在固定点上放大的。并且显示缩放百分比的标签也随图像移动。 

这是我现有的代码。

MainWindow。 xaml

< Window x：Class =" ImageViewer.MainWindow" 
 xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns：x =" http://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns：d =" http://schemas.microsoft.com/expression/blend/2008" 
 xmlns：mc =" http://schemas.openxmlformats.org/markup-compatibility/2006" 
 xmlns：local =" clr-namespace：ImageViewer" 
 Name =" mainWindow" 
 mc：Ignorable =" d" 
 Title =" MainWindow" WindowStyle = QUOT;无" 
允许Transpensncy =" True" 
 MouseDown =" Window_MouseDown" 
 MouseWheel =" Zoom_OnMouseWheel" 
 WindowState =" Maximized"> 
< Window.Background> 
< SolidColorBrush Opacity =" 0.5"颜色="＃FF3C3C6A" /> 
< /Window.Background> 
< Grid OpacityMask =" White"余量= QUOT; 0,0,0,0"> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =" *" /> 
< ColumnDefinition Width =" Auto" /> 
< ColumnDefinition Width =" *" /> 
< /Grid.ColumnDefinitions> 
< Grid.RowDefinitions> 
< RowDefinition Height =" 2 *" /> 
< RowDefinition Height =" Auto" /> 
< RowDefinition Height =" 3 *" /> 
< /Grid.RowDefinitions> 
< Image Name =" imageContainer"高度= QUOT; 500"余量= QUOT; 0,0,0,0" Grid.Column = QUOT 1 QUOT; Grid.Row = QUOT 1 QUOT; 
 MouseLeftButtonDown =" imageContainer_MouseLeftButtonDown" 
 MouseLeftButtonUp =" imageContainer_MouseLeftButtonUp" /> 
 
< Label Name =" ZoomLabel" Grid.Column = QUOT 1 QUOT; Grid.Row = QUOT 1 QUOT; 
 Content =" 100％" Horizo​​ntalContentAlignment = QUOT;中心" 
 VerticalContentAlignment =" Center" 
背景="＃FF383838"前景= QUOT;＃FFEAE4E4" 
 FontWeight =" Bold"不透明度= QUOT; 0.75"字号= QUOT; 30英寸; 
 Width =" 150"高度= QUOT; 50"余量= QUOT; 0,0,0,0" /> 
< / Grid> 
< / Window> 
 

MainWindow.xaml.cs

公共部分类MainWindow ：Window 
 {
 
 public MainWindow（）
 {
 InitializeComponent（）; 
 this.PreviewKeyDown + = new KeyEventHandler（HandleEsc）; 
 imageContainer.Source = new BitmapImage（new Uri（" image.jpg"））; 
} 
 
 private double _zoomValue = 1.0; 
 
 private void Zoom_OnMouseWheel（object sender，MouseWheelEventArgs e）
 {
 ZoomLabel.Content =（int）（_ zoomValue * 100）; 
 
 if（e.Delta> 0）
 {
 _zoomValue + = 0.1; 
} 
其他
 {
 if（_zoomValue> .2）
 {
 _zoomValue  -  = 0.1; 
} 
} 
 
 ScaleTransform scale = new ScaleTransform（_zoomValue，_zoomValue）; 
 imageContainer.LayoutTransform = scale; 
 e.Handled = true; 
} 
} 
 

现在我需要三件事的帮助：

1. 我需要在鼠标滚轮上的
   鼠标指针位置上放大图像中的图像。
2. I需要在鼠标拖动时平移图像的功能。
3. 我需要 ZoomLabel 始终保持在屏幕中的固定位置（最好是在中心）

我对设计很灵活。因此，欢迎任何能够提供所需结果的建议。但我真的更喜欢保持设计简单和最小化。

---

nsssayom

解决方案

好的。我找到了堆栈溢出的解决方案：

Wiesław$ b $bŠoltés的回答   这里

I am working on a full-screen Image Viewer and using WPF to build it. I am familiar with Windows Form but never worked with WPF before. So far, I have managed to make a full-screen window and place an image at the center using Grid. I also can zoom the image on Mouse Wheel down. But the image seems to be zoomed on a fixed point as origin. And the label that is showing zoom percentage is also moving with the image. 

Here is my existing codes.

MainWindow.xaml

<Window x:Class="ImageViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ImageViewer"
        Name="mainWindow"
        mc:Ignorable="d"
        Title="MainWindow" WindowStyle="None"
        AllowsTransparency="True"
        MouseDown="Window_MouseDown"
        MouseWheel="Zoom_OnMouseWheel"
        WindowState="Maximized">
    <Window.Background>
        <SolidColorBrush Opacity="0.5" Color="#FF3C3C6A"/>
    </Window.Background>
    <Grid OpacityMask="White" Margin="0,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
        <Image Name ="imageContainer"  Height="500" Margin="0,0,0,0" Grid.Column="1" Grid.Row="1"
               MouseLeftButtonDown="imageContainer_MouseLeftButtonDown"
               MouseLeftButtonUp="imageContainer_MouseLeftButtonUp"/>
       
        <Label Name ="ZoomLabel" Grid.Column="1" Grid.Row="1" 
                   Content="100%" HorizontalContentAlignment="Center"
                   VerticalContentAlignment="Center"
                   Background="#FF383838" Foreground="#FFEAE4E4" 
                   FontWeight="Bold" Opacity="0.75" FontSize="30" 
                    Width="150" Height="50" Margin="0,0,0,0"/>
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
{

        public MainWindow()
        {
            InitializeComponent();
            this.PreviewKeyDown += new KeyEventHandler(HandleEsc);
            imageContainer.Source = new BitmapImage(new Uri("image.jpg"));
        }

        private double _zoomValue = 1.0;

        private void Zoom_OnMouseWheel(object sender, MouseWheelEventArgs e)
        {
            ZoomLabel.Content = (int)(_zoomValue * 100);

            if (e.Delta > 0)
            {
                _zoomValue += 0.1;
            }
            else
            {
                if (_zoomValue > .2)
                {
                    _zoomValue -= 0.1;
                }
            }

            ScaleTransform scale = new ScaleTransform(_zoomValue, _zoomValue);
            imageContainer.LayoutTransform = scale;
            e.Handled = true;
        }
    }

Now I need help with three things:

1. I need the image in the image to be zoomed on the mouse pointer location on mousewheel.
2. I need the functionality to pan the image on mouse drag.
3. I need the ZoomLabel always stay at a fixed position in screen (Preferably at center)

I am flexible about the design. So, any suggestion that can provide the desired outcome is welcomed. But I would really prefer keeping the design simple and minimal.

---

nsssayom

解决方案

Okay. I have found a solution in stack overflow:

Wiesław Šoltés's answer  Here

这篇关于缩放和平移图像，在窗口中央放置固定标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！