WP7 MultiScaleImage和DeepZoom

首先需要使用Deep Zoom Composer 工具组合三个或几个图片，如果不会的话 可以网上找找，有很多资料的并且也很简单。还是简单那介绍一下吧：

Deep Zoom 本来是微软开发团队为Silverlight 富客户端做图片的展示做的一个工具，可以产生非常好的效果，随便WP7使用Silverlight技术，这一功能也移植到移动设置。本篇主要学习如何使用Deep Zoom 处理、加载图片，大纲如下：

DeepZoom基本知识

• • 源于遥感影像的金字塔显示方式
  • 提供了与高分辩率图像进行交互的能力
  • 可以快速绽放图像而不影响的性能
  • 加载或平衡图像时可以光滑过渡，Spring Animation

应用

　　根据上面的图，一般我们使用Deep Zoom 技术可以来做以下这些应用程序：

• 高分辩率、极大图像的浏览
• 3D合成图像
• 广告

分类

　　可做的图像分类有两种，为如下：

• Single　　单一图片
• Collection　　系列图片

DeepZoom 图像需要到微软的 下载网站 下载DeepZoomComposer 工具，下载它，然后安装。

生成的文件中，你可以不用管，我们真正需要的是dzc_output.xml这个文件，下面我们使用MultiScaleImage的Source只要指定它的地址即可加载。

MultiScaleImage 的使用

• 打开、放大和平移多分辩率图像
• 快速任意缩放展示大图像、高分辩率图像的应用程序
• 属性　　Source -Web URI　　UseSprings-Spring animation      ViewportOrigin -中心点　　ViewportWidth -缩放级别

下面是一张对中心点和缩放级别的效果：

事件

• ImageFailed　　下载超时、打开错误时触发
• ImageOpenFaild　　图像打开失败触发
• ImageOpenSuccesded　　图像打开成功后触发

　　使用

 <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>


        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <MultiScaleImage HorizontalAlignment="Left" Margin="12,26,0,0" Name="multiScaleImage1" VerticalAlignment="Top" 
                             Height="430"  Source="http://localhost:12882/GeneratedImages/dzc_output.xml"
                             ImageOpenSucceeded="multiScaleImage1_ImageOpenSucceeded"  UseSprings="False" ViewportWidth="1" >
             </MultiScaleImage>
        </Grid>
    </Grid>
 
    <!--Sample code showing usage of ApplicationBar-->
   <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="全模式" Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="还原" Click="ApplicationBarIconButton_Click_1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button3.png" Text="放大"  Click="ApplicationBarIconButton_Click_2"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button4.png" Text="缩小" Click="ApplicationBarIconButton_Click_3"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

 后台代码：

namespace DeepZoomComposer
{
    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();// 捕捉
        }
        
        
        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 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();


        }


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


        }






    }
}

最后效果如图：