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

　　使用


　　
　　
　　看看还没有运行的时候，我们给的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;
            }
        }
        ///
        /// 抬起鼠标（手指）的效果
        ///
        ///
        ///
        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