Deep Zoom 本来是微软开发团队为Silverlight 富客户端做图片的展示做的一个工具，可以产生非常好的效果，随便WP7使用Silverlight 技术，这一功能也移植到移动设置。本篇主要学习如何使用Deep Zoom 处理、加载图片，大纲如下：
- DeepZoom 基本知识
- DeepZoomComposer 工具
- MultilScaleImage 控件的使用 ，主要用来展示DeepZoom 图片
DeepZoom基本知识
- 源于遥感影像的金字塔显示方式
- 提供了与高分辩率图像进行交互的能力
- 可以快速绽放图像而不影响应用的性能
- 加载或平衡图像时可以光滑过渡，Spring Animation
说了一大堆，可能有些朋友还不知道Deep Zoom 的效果如何，大体应用的场景等，看下面两张图，你可能会有比较清晰的理解了。
是不是己经知道了呢？
应用
根据上面的图，一般我们使用Deep Zoom 技术可以来做以下这些应用程序：
- 高分辩率、极大图像的浏览
- 3D合成图像
- 广告，这个可以得到MONEY呀。呵呵
分类
可做的图像分类有两种，为如下：
- Single 单一图片
- Collection 系列图片
DeepZoomComposer 工具
制作 DeepZoom 图像需要到微软的下载网站下载DeepZoomComposer 工具，下载地址：点我下载吧 下载它，然后安装。
安装后，打开该工具，新建一个工程项目。
工程新建完后，右方有个按钮，点击它添加图片，我这里添加了三张图片(Collection) ，添加完后点击中上方Compose 按钮，将你的图片拖放到一个你觉得满意的地方，如下图的摆放：
觉得满意的话，点击第三个按钮“Export ”导出我们制作好的图片，点击Preview，你的屏幕右下角将会弹出一个Development Server 端口，如下图：
记住如果你需要本地测试的话，这个模拟服务不要关掉它。否则无法进行本地测试，后面会提到。
如果上面的步骤没问题的话，你会看到它为你打开了一个测试的HTML，里面就是你刚才拖拉的效果，效果如下：
该文件最终为我们编译的的文件是这样的：
生成的文件中，你可以不用管，我们真正需要的是dzc_output.xml这个文件，下面我们使用MultiScaleImage的Source只要指定它的地址即可加载。
MultiScaleImage 的使用
- 打开、放大和平移多分辩率图像
- 快速任意缩放展示大图像、高分辩率图像的应用程序
- 属性 Source -Web URI UseSprings-Spring animation ViewportOrigin -中心点 ViewportWidth -缩放级别
下面是一张对中心点和缩放级别的效果：
事件
- ImageFailed 下载超时、打开错误时触发
- ImageOpenFaild 图像打开失败触发
- ImageOpenSuccesded 图像打开成功后触发
使用
<
MultiScaleImage
HorizontalAlignment
="Left"
Margin
="12,26,0,0"
Name
="multiScaleImage1"
VerticalAlignment
="Top"
Height
="430"
Source
="http://localhost:12845/GeneratedImages/dzc_output.xml"
ImageOpenSucceeded
="multiScaleImage1_ImageOpenSucceeded"
/>
看看还没有运行的时候，我们给的URI是否会正确被模拟器加载：
具体代码就不多说了。下面给出的代码将包含了注释，看代码即可理解：
public
partial
class
MainPage : PhoneApplicationPage
{
private double zoom = 1 ;
private bool isMoving = false ;
private bool isDown = false ;
private Point lastMouseDownPos = new Point();
private Point lastMousePos = new Point();
private Point lastMouseViewPos = new Point();
// Constructor
public MainPage()
{
InitializeComponent();
}
private void multiScaleImage1_ImageOpenSucceeded( object sender, RoutedEventArgs e)
{
multiScaleImage1.ViewportOrigin = new Point( 0 , 0 ); // 中心点设置为0
multiScaleImage1.ViewportWidth = 1 ; // 绽放级别为1
}
private void PhoneApplicationPage_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
lastMouseDownPos = e.GetPosition(multiScaleImage1); // 保存当前按下时的位置
lastMouseViewPos = multiScaleImage1.ViewportOrigin; // 保存当前按下时缩放中心点的位置
isDown = true ; // 将标识DOWN设置为按下状态
multiScaleImage1.CaptureMouse(); // 捕捉
}
private void PhoneApplicationPage_MouseMove( object sender, MouseEventArgs e)
{
lastMousePos = e.GetPosition(multiScaleImage1);
// 当按下并且还没有开始移动时初始化一些必要的数据
if (isDown &&! isMoving)
{
isMoving = true ; // 将标识移动的MOVING设置为true
double w = multiScaleImage1.ViewportWidth; // 保存它的缩放级别
Point p = new Point(multiScaleImage1.ViewportOrigin.X,multiScaleImage1.ViewportOrigin.Y); // 保存坐标圆点的位置
multiScaleImage1.UseSprings = false ; // 关掉animation
multiScaleImage1.ViewportOrigin = new Point(p.X,p.Y); // 将中心点坐标赋值 给它
multiScaleImage1.ViewportWidth = w; // 将缩放级别赋值 给它
zoom = 1 / w;
multiScaleImage1.UseSprings = true ; // 打开animation
}
if (isMoving)
{
Point point = lastMouseViewPos; // 得到中心点的位置
// 将最后一次的坐标位置和控件的真实宽度和缩放级别进行计算
point.X = (lastMouseDownPos.X - lastMousePos.X) / multiScaleImage1.ActualWidth * multiScaleImage1.ViewportWidth;
point.Y = (lastMouseDownPos.Y - lastMousePos.Y) / multiScaleImage1.ActualWidth * multiScaleImage1.ViewportWidth;
// 这样的计算将产生平移的效果
multiScaleImage1.ViewportOrigin = point;
}
}
/// <summary>
/// 抬起鼠标（手指）的效果
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PhoneApplicationPage_MouseLeftButtonUp( object sender, MouseButtonEventArgs e)
{
// 如果现在的动作是在移动
if (isMoving)
{
bool isShift = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
double newzoom = zoom;
if (isShift)
{
newzoom /= 2 ;
}
else
{
newzoom *= 2 ;
}
// multiScaleImage1.ElementToLogicalPoint(this.lastMousePos) 利用这个方法计算上一次鼠标移动的位置
// 转换成控件内部的原创坐标
Zoom(newzoom,multiScaleImage1.ElementToLogicalPoint( this .lastMousePos));
}
isMoving = false ;
isDown = false ;
// 释放掉鼠标的捕捉
multiScaleImage1.ReleaseMouseCapture();
}
void Zoom( double zoomnew, Point p)
{
if (zoomnew < 0.5 )
{
zoomnew = 0.5 ;
}
// 将计算好的值赋给缩放的逻辑点
multiScaleImage1.ZoomAboutLogicalPoint(zoomnew / zoom, p.X, p.Y);
zoom = zoomnew;
}
// 全模式
private void ApplicationBarIconButton_Click( object sender, EventArgs e)
{
// 对某一个点进行缩放，对它的中心圆点进行1.5倍的缩放
multiScaleImage1.ZoomAboutLogicalPoint( 1.5 , 0 , 0 );
}
// 还原恢复初始值
private void ApplicationBarIconButton_Click_1( object sender, EventArgs e)
{
this .multiScaleImage1.ViewportWidth = 1 ; // 将缩放比例设置为原始值1
multiScaleImage1.ViewportOrigin = new Point( 0 , 0 ); // 重新回到圆点
}
// 放大
private void ApplicationBarIconButton_Click_2( object sender, EventArgs e)
{
// 将缩放比例再乘以1.3，然后将控件的真实高宽转换成控件内部的原创坐标
// 因为控件内部的坐标跟系统的坐标不一致，需要进行换算
Zoom(zoom * 1.3 , multiScaleImage1.ElementToLogicalPoint( new Point( 0.5 * multiScaleImage1.ActualWidth, 0.5 * multiScaleImage1.ActualHeight)));
}
// 缩小
private void ApplicationBarIconButton_Click_3( object sender, EventArgs e)
{
// 跟放大同样的道理 ，只不过这里的放大比例是除以1.3倍
Zoom(zoom / 1.3 , multiScaleImage1.ElementToLogicalPoint( new Point( 0.5 * multiScaleImage1.ActualWidth, 0.5 * multiScaleImage1.ActualHeight)));
}
}
{
private double zoom = 1 ;
private bool isMoving = false ;
private bool isDown = false ;
private Point lastMouseDownPos = new Point();
private Point lastMousePos = new Point();
private Point lastMouseViewPos = new Point();
// Constructor
public MainPage()
{
InitializeComponent();
}
private void multiScaleImage1_ImageOpenSucceeded( object sender, RoutedEventArgs e)
{
multiScaleImage1.ViewportOrigin = new Point( 0 , 0 ); // 中心点设置为0
multiScaleImage1.ViewportWidth = 1 ; // 绽放级别为1
}
private void PhoneApplicationPage_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
lastMouseDownPos = e.GetPosition(multiScaleImage1); // 保存当前按下时的位置
lastMouseViewPos = multiScaleImage1.ViewportOrigin; // 保存当前按下时缩放中心点的位置
isDown = true ; // 将标识DOWN设置为按下状态
multiScaleImage1.CaptureMouse(); // 捕捉
}
private void PhoneApplicationPage_MouseMove( object sender, MouseEventArgs e)
{
lastMousePos = e.GetPosition(multiScaleImage1);
// 当按下并且还没有开始移动时初始化一些必要的数据
if (isDown &&! isMoving)
{
isMoving = true ; // 将标识移动的MOVING设置为true
double w = multiScaleImage1.ViewportWidth; // 保存它的缩放级别
Point p = new Point(multiScaleImage1.ViewportOrigin.X,multiScaleImage1.ViewportOrigin.Y); // 保存坐标圆点的位置
multiScaleImage1.UseSprings = false ; // 关掉animation
multiScaleImage1.ViewportOrigin = new Point(p.X,p.Y); // 将中心点坐标赋值 给它
multiScaleImage1.ViewportWidth = w; // 将缩放级别赋值 给它
zoom = 1 / w;
multiScaleImage1.UseSprings = true ; // 打开animation
}
if (isMoving)
{
Point point = lastMouseViewPos; // 得到中心点的位置
// 将最后一次的坐标位置和控件的真实宽度和缩放级别进行计算
point.X = (lastMouseDownPos.X - lastMousePos.X) / multiScaleImage1.ActualWidth * multiScaleImage1.ViewportWidth;
point.Y = (lastMouseDownPos.Y - lastMousePos.Y) / multiScaleImage1.ActualWidth * multiScaleImage1.ViewportWidth;
// 这样的计算将产生平移的效果
multiScaleImage1.ViewportOrigin = point;
}
}
/// <summary>
/// 抬起鼠标（手指）的效果
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PhoneApplicationPage_MouseLeftButtonUp( object sender, MouseButtonEventArgs e)
{
// 如果现在的动作是在移动
if (isMoving)
{
bool isShift = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
double newzoom = zoom;
if (isShift)
{
newzoom /= 2 ;
}
else
{
newzoom *= 2 ;
}
// multiScaleImage1.ElementToLogicalPoint(this.lastMousePos) 利用这个方法计算上一次鼠标移动的位置
// 转换成控件内部的原创坐标
Zoom(newzoom,multiScaleImage1.ElementToLogicalPoint( this .lastMousePos));
}
isMoving = false ;
isDown = false ;
// 释放掉鼠标的捕捉
multiScaleImage1.ReleaseMouseCapture();
}
void Zoom( double zoomnew, Point p)
{
if (zoomnew < 0.5 )
{
zoomnew = 0.5 ;
}
// 将计算好的值赋给缩放的逻辑点
multiScaleImage1.ZoomAboutLogicalPoint(zoomnew / zoom, p.X, p.Y);
zoom = zoomnew;
}
// 全模式
private void ApplicationBarIconButton_Click( object sender, EventArgs e)
{
// 对某一个点进行缩放，对它的中心圆点进行1.5倍的缩放
multiScaleImage1.ZoomAboutLogicalPoint( 1.5 , 0 , 0 );
}
// 还原恢复初始值
private void ApplicationBarIconButton_Click_1( object sender, EventArgs e)
{
this .multiScaleImage1.ViewportWidth = 1 ; // 将缩放比例设置为原始值1
multiScaleImage1.ViewportOrigin = new Point( 0 , 0 ); // 重新回到圆点
}
// 放大
private void ApplicationBarIconButton_Click_2( object sender, EventArgs e)
{
// 将缩放比例再乘以1.3，然后将控件的真实高宽转换成控件内部的原创坐标
// 因为控件内部的坐标跟系统的坐标不一致，需要进行换算
Zoom(zoom * 1.3 , multiScaleImage1.ElementToLogicalPoint( new Point( 0.5 * multiScaleImage1.ActualWidth, 0.5 * multiScaleImage1.ActualHeight)));
}
// 缩小
private void ApplicationBarIconButton_Click_3( object sender, EventArgs e)
{
// 跟放大同样的道理 ，只不过这里的放大比例是除以1.3倍
Zoom(zoom / 1.3 , multiScaleImage1.ElementToLogicalPoint( new Point( 0.5 * multiScaleImage1.ActualWidth, 0.5 * multiScaleImage1.ActualHeight)));
}
}
运行效果图：
源码下载：DeeoZoom
今年最后的一篇文章，大家给点力，推荐一下哈。