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

　　使用

  < 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)));        }    }

 

　　

运行效果图：

 

　源码下载：DeeoZoom

 

　　今年最后的一篇文章，大家给点力，推荐一下哈。

转载于:https://www.cnblogs.com/TerryBlog/archive/2011/01/27/1946536.html

相关资源：数据结构—成绩单生成器