图片预览Image、加载、放缩、拖动
Image属性Stretch
| Stretch | 效果 | 备注 |
|---|---|---|
| None | 图片原始大小 | 图片从原点（左上角）开始展示 |
| Fill | 图片填满控件 | 图片不成比例 |
| Uniform | 图片成比例尽可能填满控件 | 控件上下或者左右两侧可能有空白 |
| UniformToFill | 图片成比例填满控件 | 图片的右下两侧有可能被裁剪 |
XAML
<UserControl.Resources>
<Storyboard x:Key="MsgShowStory" Storyboard.TargetName="msgBorder">
<DoubleAnimation From="1" To="0" Duration="0:0:1.5" Storyboard.TargetProperty="Opacity"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0:0:4">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:1.5" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid ClipToBounds="True" MouseWheel="Grid_MouseWheel" SizeChanged="Grid_SizeChanged" MouseLeave="GridMain_MouseLeave">
<Grid x:Name="gridCanvas"
Width="{Binding ElementName=image,Path=ActualWidth}"
Height="{Binding ElementName=image,Path=ActualHeight}"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Image x:Name="image" Stretch="Uniform"
MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseLeftButtonUp="Image_MouseLeftButtonUp" MouseMove="Image_MouseMove"/>
</Grid>
<Border x:Name="msgBorder" Width="100" Height="62" Background="WhiteSmoke" CornerRadius="5" Opacity="1" IsHitTestVisible="False" Visibility="Collapsed">
<TextBlock x:Name="msgTextBlock" Text="100%" Foreground="Gray" FontWeight="Bold" FontSize="22" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
cs
using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Input;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
public partial class UC_ImageDisplay : UserControl
{
/// <summary>
/// 原图大小
/// </summary>
private Size _imageSize;
/// <summary>
/// 界面大小
/// </summary>
private Size _ucSize;
/// <summary>
/// 最小缩放比例，不小于Mini(原始尺寸,当前容器)*50%
/// </summary>
private double _minScale;
/// <summary>
/// 最大缩放比例
/// </summary>
private double _maxScale;
/// <summary>
/// 初始默认缩放比
/// </summary>
private double _defaultScale;
/// <summary>
/// 画布相对于原图缩放比例
/// </summary>
private double _zoomScale;
/// <summary>
/// 鼠标滚动一次（120）代表的缩放大小
/// </summary>
private const double _scrollValue = 0.2;
/// <summary>
/// 是否开始拖动鼠标
/// </summary>
private bool _enableMove;
/// <summary>
/// 鼠标拖动的起点
/// </summary>
private Point _ptStart;
/// <summary>
/// 鼠标起点时的边距
/// </summary>
private Point _ptMargin;
public UC_ImageDisplay()
{
InitializeComponent();
}
private void UserControl_Unloaded(object sender, RoutedEventArgs e)
{
// 释放资源
BindingOperations.ClearBinding(image, System.Windows.Controls.Image.SourceProperty);
}
// 图片拖动
// 图片居中
// 图片加载
}
图片拖动
private void Grid_MouseWheel(object sender, MouseWheelEventArgs e)
{
//计算新的缩放比
double zoomScale = Math.Min(Math.Max(_zoomScale + (_scrollValue * e.Delta / 120), _minScale), _maxScale);
//新的缩放比跟旧的一样的话就不再浪费资源进行处理了
if (_zoomScale == zoomScale)
{
return;
}
Point ptUI = e.GetPosition(this);//获取鼠标点相对于UI界面的坐标
Point ptMap = e.GetPosition(gridCanvas);//获取鼠标点相对于缩放前画布的坐标
Point ptImage = new Point(ptMap.X / _zoomScale, ptMap.Y / _zoomScale);//获取鼠标点相对于原图的坐标
Point ptMapNew = new Point(ptImage.X * zoomScale, ptImage.Y * zoomScale);//计算鼠标点相对于缩放后画布的坐标
Console.WriteLine($"=============================");
Console.WriteLine($"图像大小是：长:{gridCanvas.Width / _zoomScale},宽:{gridCanvas.Height / _zoomScale}");
Console.WriteLine($"Map缩放前大小是：长:{gridCanvas.Width },宽:{gridCanvas.Height}");
Console.WriteLine($"Map缩放后大小是：长:{gridCanvas.Width * zoomScale / _zoomScale},宽:{gridCanvas.Height * zoomScale / _zoomScale}");
Console.WriteLine($"缩放点的UI坐标是：X:{ptUI.X },Y:{ptUI.Y }");
Console.WriteLine($"缩放点的真实坐标是：X:{ptImage.X},Y:{ptImage.Y }");
Console.WriteLine($"缩放点的在Map上的原坐标是：X:{ptMap.X },Y:{ptMap.Y }");
Console.WriteLine($"缩放点的在Map上缩放后的坐标是，X:{ptMapNew.X },Y:{ptMapNew.Y }");
Console.WriteLine($"MapMargin，X:{gridCanvas.Margin.Left },Y:{gridCanvas.Margin.Top }");
//计算缩放后画布的偏移量
if (zoomScale == _defaultScale)
{
double left = (_ucSize.Width - (_imageSize.Width * zoomScale)) / 2;
double top = (_ucSize.Height - (_imageSize.Height * zoomScale)) / 2;
Console.WriteLine($"Margin after,X:{left},Y:{top}");
gridCanvas.Margin = new Thickness(left, top, 0, 0);
}
else
{
double left = (ptMapNew.X - ptMap.X) * (-1);
double top = (ptMapNew.Y - ptMap.Y) * (-1);
Console.WriteLine($"Margin after,X:{left},Y:{top}");
// 画布大小
double width = gridCanvas.Width * zoomScale / _zoomScale;
double height = gridCanvas.Height * zoomScale / _zoomScale;
if (zoomScale > _zoomScale) // 放大
{
// 鼠标位置相对不动
left += gridCanvas.Margin.Left;
top += gridCanvas.Margin.Top;
if (width <= this.ActualWidth)
{
left = (this.ActualWidth - width) / 2;
}
if (height <= this.ActualHeight)
{
top = (this.ActualHeight - height) / 2;
}
}
else
{
// 缩小时新边距过大
if (left + width >= this.ActualWidth)
{
left = (this.ActualWidth - width) / 2;
}
if (top + height >= this.ActualHeight)
{
top = (this.ActualHeight - height) / 2;
}
}
gridCanvas.Margin = new Thickness(left, top, 0, 0);
}
SetImageZoomScale(zoomScale);
}
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_enableMove = true;
//获取鼠标点相对于UI界面的坐标
_ptStart = e.GetPosition(this);
_ptMargin.X = gridCanvas.Margin.Left;
_ptMargin.Y = gridCanvas.Margin.Top;
}
private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_enableMove = false;
}
private void GridMain_MouseLeave(object sender, MouseEventArgs e)
{
_enableMove = false;
}
private void Image_MouseMove(object sender, MouseEventArgs e)
{
if (_enableMove)
{
//计算新的缩放比
double zoomScale = Math.Min(Math.Max(_zoomScale, _minScale), _maxScale);
if (IsEqual(zoomScale, _defaultScale))
{
return;
}
Point ptUI = e.GetPosition(this);//获取鼠标点相对于UI界面的坐标
Point ptMap = e.GetPosition(gridCanvas);//获取鼠标点相对于缩放前画布的坐标
Point ptImage = new Point(ptMap.X / _zoomScale, ptMap.Y / _zoomScale);//获取鼠标点相对于原图的坐标
Point ptMapNew = new Point(ptImage.X * zoomScale, ptImage.Y * zoomScale);//计算鼠标点相对于缩放后画布的坐标
Console.WriteLine($"=============================");
Console.WriteLine($"图像大小是：长:{gridCanvas.Width / _zoomScale},宽:{gridCanvas.Height / _zoomScale} 画板：{this.ActualWidth} X {this.ActualHeight}");
Console.WriteLine($"Map缩放前大小是：长:{gridCanvas.Width },宽:{gridCanvas.Height}");
Console.WriteLine($"Map缩放后大小是：长:{gridCanvas.Width * zoomScale / _zoomScale},宽:{gridCanvas.Height * zoomScale / _zoomScale}");
Console.WriteLine($"缩放点的UI坐标是：X:{ptUI.X },Y:{ptUI.Y }");
Console.WriteLine($"缩放点的真实坐标是：X:{ptImage.X},Y:{ptImage.Y }");
Console.WriteLine($"缩放点的在Map上的原坐标是：X:{ptMap.X },Y:{ptMap.Y }");
Console.WriteLine($"缩放点的在Map上缩放后的坐标是，X:{ptMapNew.X },Y:{ptMapNew.Y }");
Console.WriteLine($"MapMargin，X:{gridCanvas.Margin.Left },Y:{gridCanvas.Margin.Top }");
double xOffset = _ptMargin.X + (ptUI.X - _ptStart.X);
double yOffset = _ptMargin.Y + (ptUI.Y - _ptStart.Y);
SetImageMargin(xOffset, yOffset);
}
}
/// <summary>
/// 鼠标拖动时画布相对界面的偏移量
/// </summary>
private void SetImageMargin(double left, double top)
{
double blankWidth = this.ActualWidth - gridCanvas.Width;
double blankHeight = this.ActualHeight - gridCanvas.Height;
// 如果留有空白
if (blankWidth >= 0)
{
left = blankWidth / 2;
}
else
{
// 边界判断
if (left >= 0)
{
left = 0;
}
else if (left <= blankWidth)
{
left = blankWidth;
}
}
if (blankHeight >= 0)
{
top = blankHeight / 2;
}
else
{
if (top >= 0)
{
top = 0;
}
else if (top <= blankHeight)
{
top = blankHeight;
}
}
_ = Dispatcher.BeginInvoke(new Action(() =>
{
gridCanvas.Margin = new Thickness(left, top, 0, 0);
}));
}
图片居中
private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
{
InitZoomScaleImageDispaly();
}
private void InitZoomScaleImageDispaly()
{
_ucSize = RenderSize;
CalculateZoomScale(_imageSize, _ucSize);
_defaultScale = _zoomScale;
// 居中显示
double left = (_ucSize.Width - (_imageSize.Width * _zoomScale)) / 2;
double top = (_ucSize.Height - (_imageSize.Height * _zoomScale)) / 2;
gridCanvas.Margin = new Thickness(left, top, 0, 0);
}
/// <summary>
/// 设置默认的缩放比、最小缩放比、最大缩放比
/// </summary>
/// <param name="imageSize">图像大小</param>
/// <param name="uiSize">待显示的界面大小</param>
/// <returns></returns>
private void CalculateZoomScale(Size imageSize, Size uiSize)
{
if (imageSize.Width == 0 || imageSize.Height == 0)
{
return;
}
if (uiSize.Width == 0 || uiSize.Height == 0)
{
return;
}
//取最大的压缩比例
double zoomScale = Math.Min(uiSize.Width / imageSize.Width, uiSize.Height / imageSize.Height);
//图片尺寸大于容器
if (zoomScale < 1)
{
if (zoomScale < 0.5)
{
//极大
_minScale = zoomScale;
_maxScale = Math.Floor(1 / zoomScale);
}
else
{
_minScale = zoomScale;
_maxScale = Math.Ceiling(2 / zoomScale);
}
}
//图片尺寸小于容器
else
{
if (zoomScale > 8)
{
//极小
_minScale = 1;
_maxScale = Math.Floor(0.5 * zoomScale);
zoomScale = _maxScale;
}
else if (zoomScale > 4)
{
//较小
_minScale = 1;
_maxScale = Math.Floor(0.75 * zoomScale);
zoomScale = _maxScale;
}
else
{
_minScale = 1;
_maxScale = Math.Ceiling(zoomScale);
zoomScale = 1;
}
}
SetImageZoomScale(zoomScale);
}
/// <summary>
/// 画布相对于原图缩放比例
/// </summary>
private void SetImageZoomScale(double zoomScale)
{
if (zoomScale <= 0)
{
return;
}
_zoomScale = zoomScale;
_ = Dispatcher.BeginInvoke(new Action(() =>
{
//计算缩放后图片的大小
image.Width = _imageSize.Width * zoomScale;
image.Height = _imageSize.Height * zoomScale;
msgTextBlock.Text = Math.Round(zoomScale * 100) + "%";
Storyboard storyboard = FindResource("MsgShowStory") as Storyboard;
storyboard.Begin();
}));
}
Image绑定图片
/// <summary>
/// 从字节数组加载图片
/// </summary>
/// <param name="bytes"></param>
public void LoadLayer(byte[] bytes)
{
BitmapImage bitmap = GenerateBitmapImage(bytes);
LoadLayer(bitmap);
}
/// <summary>
/// 加载底图(Uniform缩小或最佳比例放大)
/// </summary>
/// <param name="bmp"></param>
/// <param name="mouseOperateType"></param>
public void LoadLayer(BitmapImage bmp)
{
BindingOperations.ClearBinding(image, Image.SourceProperty);
image.Source = bmp;
_imageSize = new Size(bmp.PixelWidth, bmp.PixelHeight);
InitZoomScaleImageDispaly();
}
IsEqual 浮点数double相等性比较
Uri路径引用
XAML
<Image x:Name="Image1" Source="pack://application:,,,/Image/nopicture.jpg"/>
<Image x:Name="Image2" Source="pack://application:,,,/CurrentProjectName;component/Image/nopicture.jpg"/>
cs
// 默认绝对路径
Image1.Source = new BitmapImage(new Uri("pack://application:,,,/Image/nopicture.jpg"));
Image2.Source = new BirmapImage(new Uri(“pack://application:,,,/CurrentProjectName;component/Image/nopicture.jpg”));
// 相对路径
Image1.Source = new BitmapImage(new Uri("\\Image\\nopicture.jpg", UriKind.Relative));
// 引用dll中的图片
Image2.Source = new BitmapImage(new Uri(“ImageLibiary;component/Image/nopicture.jpg”, UriKind.Relavite));
浙公网安备 33010602011771号