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