最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器。

前台代码:

<Window x:Class="PictureViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
AllowDrop="True"
Title="图片查看器" Height="" Width="" Loaded="Window_Loaded"
SizeChanged="Window_SizeChanged" DragEnter="Window_DragEnter" Drop="Window_Drop">
<Grid x:Name="mainGrid">
<Grid.Resources>
<TransformGroup x:Key="TfGroup">
<ScaleTransform ScaleX="" ScaleY=""/>
<TranslateTransform X="" Y=""/>
</TransformGroup>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height=""></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions> <Button Grid.Row="" Width="" Height="" Cursor="Hand" Background="Transparent" BorderThickness="" Content="打开图片" Click="OpenImg_Click" x:Name="OpenImg" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"/>
<Label Content="缩放倍数:" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="130,0,0,0"/>
<TextBox x:Name="txtMinSize" Width="" Height="" VerticalContentAlignment="Center" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="200,0,0,0" TextChanged="txtMinSize_TextChanged" Text="0.1"/>
<Label Content="--" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="240,0,0,0"/>
<TextBox x:Name="txtMaxSize" Width="" Height="" VerticalContentAlignment="Center" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="260,0,0,0" TextChanged="txtMaxSize_TextChanged" Text=""/>
<ScrollViewer x:Name="mainScrollv" HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled" Cursor="SizeAll" Margin="" Focusable="False" Grid.Row="">
<ContentControl MouseLeftButtonDown="ContentControl_MouseLeftButtonDown"
MouseLeftButtonUp="ContentControl_MouseLeftButtonUp"
MouseMove="ContentControl_MouseMove"
MouseWheel="ContentControl_MouseWheel"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="IMG" Margin="" RenderTransform="{StaticResource TfGroup}" RenderOptions.BitmapScalingMode="NearestNeighbor"/> </ContentControl> </ScrollViewer>
</Grid>
</Window>

代码解析:

  通过一个定义一个TransformGroup,通过Key绑定到图片控件中,并且里面使用ScaleTransform实现缩放(scaleX是水平方向的缩放倍数,现默认为1倍,即无缩放,scaleY同理),TranslateTransform实现平移(鼠标拖动,X为水平方向的偏移量,Y为垂直方向的偏移量)。

  另通过一个ContentControl控件摆放图片控件,并为控件绑定各种事件(鼠标点下、抬起、拖动、滚动),图片控件的RenderOptions.BitmapscalingMode="NearestNeighbor"属性用于优化图片变换过程,防止出现图片移动或缩放模糊。

后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes; namespace PictureViewer
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
} private bool mouseDown;
private Point mouseXY;
private double min = 0.1, max = 3.0;//最小/最大放大倍数 private void Domousemove(ContentControl img, MouseEventArgs e)
{
if (e.LeftButton != MouseButtonState.Pressed)
{
return;
}
var group = IMG.FindResource("TfGroup") as TransformGroup;
var transform = group.Children[] as TranslateTransform;
var position = e.GetPosition(img);
transform.X -= mouseXY.X - position.X;
transform.Y -= mouseXY.Y - position.Y;
mouseXY = position;
} private void DowheelZoom(TransformGroup group, Point point, double delta)
{
var pointToContent = group.Inverse.Transform(point);
var transform = group.Children[] as ScaleTransform;
if (transform.ScaleX + delta < min) return;
if (transform.ScaleX + delta > max) return;
transform.ScaleX += delta;
transform.ScaleY += delta;
var transform1 = group.Children[] as TranslateTransform;
transform1.X = - * ((pointToContent.X * transform.ScaleX) - point.X);
transform1.Y = - * ((pointToContent.Y * transform.ScaleY) - point.Y);
} private void ContentControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var img = sender as ContentControl;
if (img == null)
{
return;
}
img.CaptureMouse();
mouseDown = true;
mouseXY = e.GetPosition(img);
} private void ContentControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
var img = sender as ContentControl;
if (img == null)
{
return;
}
img.ReleaseMouseCapture();
mouseDown = false;
} private void ContentControl_MouseMove(object sender, MouseEventArgs e)
{
var img = sender as ContentControl;
if (img == null)
{
return;
}
if (mouseDown)
{
Domousemove(img, e);
}
} private void ContentControl_MouseWheel(object sender, MouseWheelEventArgs e)
{
var img = sender as ContentControl;
if (img == null)
{
return;
}
var point = e.GetPosition(img);
var group = IMG.FindResource("TfGroup") as TransformGroup;
var delta = e.Delta * 0.001;
DowheelZoom(group, point, delta);
} private void OpenImg_Click(object sender, RoutedEventArgs e)
{
// 在WPF中, OpenFileDialog位于Microsoft.Win32名称空间
Microsoft.Win32.OpenFileDialog dialog = new Microsoft.Win32.OpenFileDialog();
dialog.Filter = "Files (*.png)|*.png|Files(*.jpg)|*.jpg";
if (dialog.ShowDialog() == true)
{
//MessageBox.Show(dialog.FileName);
this.IMG.Source = new BitmapImage(new Uri(dialog.FileName));
}
} private void Window_Loaded(object sender, RoutedEventArgs e)
{
setViewSize();
}
private void setViewSize()
{
mainScrollv.Width = this.ActualWidth;
mainScrollv.Height = this.ActualHeight - ;
} private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
setViewSize();
} private void txtMinSize_TextChanged(object sender, TextChangedEventArgs e)
{
this.min = double.Parse(txtMinSize.Text);
} private void txtMaxSize_TextChanged(object sender, TextChangedEventArgs e)
{
this.max = double.Parse(txtMaxSize.Text);
} private void Window_DragEnter(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(DataFormats.FileDrop))
e.Effects = DragDropEffects.Link;//WinForm中为e.Effect = DragDropEffects.Link
else e.Effects = DragDropEffects.None;//WinFrom中为e.Effect = DragDropEffects.None } private void Window_Drop(object sender, DragEventArgs e)
{
string filename = ((System.Array)e.Data.GetData(DataFormats.FileDrop)).GetValue().ToString();
this.IMG.Source = new BitmapImage(new Uri(filename));
} }
}

可将图片拖拽到窗口打开,Window_DragEnter里验证拖拽进来的文件是否可用,Window_Drop处理拖拽进来之后的事情

源码:http://files.cnblogs.com/files/huangli321456/PictureViewer.zip

代码参照:http://www.cnblogs.com/snake-hand/archive/2012/08/13/2636227.html

wpf图片查看器,支持鼠标滚动缩放拖拽的更多相关文章

  1. viewer.js图片查看器插件(可缩放/旋转/切换)

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. wpf 仿QQ图片查看器

    参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...

  3. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  4. js手写图片查看器(图片的缩放、旋转、拖拽)

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  5. js实现图片查看器(图片的缩放、旋转、拖拽)

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

  6. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  7. Viewer.js – 强大的JS/jQuery图片查看器

    简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...

  8. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  9. jQuery功能强大的图片查看器插件

    简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...

随机推荐

  1. NOIp2016 十连测 round1

    Claris大爷出的一套模拟题.问别人要到了一份题,加深了自己NOIp要滚粗的感觉. Matser zzDP题,我只能说我第一遍写的时候还写崩了QAQ. //master //by Cydiater ...

  2. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...

  3. Git------Win7系统使用TortoiseGit

    转载: https://my.oschina.net/longxuu/blog/141699?p=1 此步可以省略 1.点击TortoiseGit->PuTTygen 2.点击"Gen ...

  4. yaml

    YAML http://baike.baidu.com/link?url=Jqbh_SBnlVuP0dPCknzd5ti5jr4h9HcacA0j56ztf4QsPcXI8kvgFaKpvhRG3em ...

  5. SQL实现类似于自动刷新数据的功能

    有时需要在SQL中,定时刷新某张表,比如说是要定时查询某张表的行数,通常做法就是手动的按F5去执行来刷新数据.但是如果这个定时查询历时较长,10分钟,或半小时,手动的话肯定是要崩溃了.貌似SQL没有像 ...

  6. Java 判断整数方法

    今天写代码的时候突然想到要怎么来判断整数,然后通过判断是否是整数来处理相关的操作.开始想到了几个方法,比如百度到的 x(int) instanceof Integer,但是这样的话程序会报错,还有一个 ...

  7. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  8. Linux进程间通信(四):命名管道 mkfifo()、open()、read()、close()

    在前一篇文章—— Linux进程间通信 -- 使用匿名管道 中,我们看到了如何使用匿名管道来在进程之间传递数据,同时也看到了这个方式的一个缺陷,就是这些进程都由一个共同的祖先进程启动,这给我们在不相关 ...

  9. Node.js入门学习笔记(三)

    基于事件驱动的回调 这个问题不好回答,不过这是Node.js原生的工作方式.它是事件驱动的,这也是它为什么这么快的原因.你可以花一点时间阅读一下Felix Geisendörfer的大作 Unders ...

  10. php生成随机字符串

    <?php echo make_random_str(); function make_random_str() { $arr = ["A","B",&q ...