Windows Phone 7 不温不火学习之【DeepZoom 详细使用方法】

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　　图像打开成功后触发

　　使用

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><MultiScaleImageHorizontalAlignment="Left"Margin="12,26,0,0"Name="multiScaleImage1"VerticalAlignment="Top"Height="430"Source="http://localhost:12845/GeneratedImages/dzc_output.xml"ImageOpenSucceeded="multiScaleImage1_ImageOpenSucceeded"/>

看看还没有运行的时候，我们给的URI是否会正确被模拟器加载：

　　具体代码就不多说了。下面给出的代码将包含了注释，看代码即可理解：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->publicpartialclassMainPage:PhoneApplicationPage
{
privatedoublezoom=1;
privateboolisMoving=false;
privateboolisDown=false;
privatePointlastMouseDownPos=newPoint();
privatePointlastMousePos=newPoint();
privatePointlastMouseViewPos=newPoint();


//Constructor
publicMainPage()
{
InitializeComponent();
}

privatevoidmultiScaleImage1_ImageOpenSucceeded(objectsender,RoutedEventArgse)
{
multiScaleImage1.ViewportOrigin=newPoint(0,0);//中心点设置为0
multiScaleImage1.ViewportWidth=1;//绽放级别为1

}

privatevoidPhoneApplicationPage_MouseLeftButtonDown(objectsender,MouseButtonEventArgse)
{
lastMouseDownPos=e.GetPosition(multiScaleImage1);//保存当前按下时的位置
lastMouseViewPos=multiScaleImage1.ViewportOrigin;//保存当前按下时缩放中心点的位置
isDown=true;//将标识DOWN设置为按下状态
multiScaleImage1.CaptureMouse();//捕捉

}

privatevoidPhoneApplicationPage_MouseMove(objectsender,MouseEventArgse)
{
lastMousePos=e.GetPosition(multiScaleImage1);
//当按下并且还没有开始移动时初始化一些必要的数据
if(isDown&&!isMoving)
{
isMoving=true;//将标识移动的MOVING设置为true
doublew=multiScaleImage1.ViewportWidth;//保存它的缩放级别
Pointp=newPoint(multiScaleImage1.ViewportOrigin.X,multiScaleImage1.ViewportOrigin.Y);//保存坐标圆点的位置
multiScaleImage1.UseSprings=false;//关掉animation
multiScaleImage1.ViewportOrigin=newPoint(p.X,p.Y);//将中心点坐标赋值给它
multiScaleImage1.ViewportWidth=w;//将缩放级别赋值给它
zoom=1/w;
multiScaleImage1.UseSprings=true;//打开animation
}
if(isMoving)
{
Pointpoint=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>
///<paramname="sender"></param>
///<paramname="e"></param>
privatevoidPhoneApplicationPage_MouseLeftButtonUp(objectsender,MouseButtonEventArgse)
{
//如果现在的动作是在移动
if(isMoving)
{
boolisShift=(Keyboard.Modifiers&ModifierKeys.Shift)==ModifierKeys.Shift;
doublenewzoom=zoom;
if(isShift)
{
newzoom/=2;
}
else
{
newzoom*=2;
}
//multiScaleImage1.ElementToLogicalPoint(this.lastMousePos)利用这个方法计算上一次鼠标移动的位置
//转换成控件内部的原创坐标
Zoom(newzoom,multiScaleImage1.ElementToLogicalPoint(this.lastMousePos));
}
isMoving=false;
isDown=false;
//释放掉鼠标的捕捉
multiScaleImage1.ReleaseMouseCapture();
}

voidZoom(doublezoomnew,Pointp)
{
if(zoomnew<0.5)
{
zoomnew=0.5;
}
//将计算好的值赋给缩放的逻辑点
multiScaleImage1.ZoomAboutLogicalPoint(zoomnew/zoom,p.X,p.Y);
zoom=zoomnew;
}

//全模式
privatevoidApplicationBarIconButton_Click(objectsender,EventArgse)
{
//对某一个点进行缩放，对它的中心圆点进行1.5倍的缩放
multiScaleImage1.ZoomAboutLogicalPoint(1.5,0,0);
}
//还原恢复初始值
privatevoidApplicationBarIconButton_Click_1(objectsender,EventArgse)
{
this.multiScaleImage1.ViewportWidth=1;//将缩放比例设置为原始值1
multiScaleImage1.ViewportOrigin=newPoint(0,0);//重新回到圆点
}
//放大
privatevoidApplicationBarIconButton_Click_2(objectsender,EventArgse)
{
//将缩放比例再乘以1.3，然后将控件的真实高宽转换成控件内部的原创坐标
//因为控件内部的坐标跟系统的坐标不一致，需要进行换算
Zoom(zoom*1.3,multiScaleImage1.ElementToLogicalPoint(newPoint(0.5*multiScaleImage1.ActualWidth,0.5*multiScaleImage1.ActualHeight)));
}
//缩小
privatevoidApplicationBarIconButton_Click_3(objectsender,EventArgse)
{
//跟放大同样的道理，只不过这里的放大比例是除以1.3倍
Zoom(zoom/1.3,multiScaleImage1.ElementToLogicalPoint(newPoint(0.5*multiScaleImage1.ActualWidth,0.5*multiScaleImage1.ActualHeight)));

}
}

　　

运行效果图：

　源码下载：DeeoZoom