WP7 MultiScaleImage和DeepZoom

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

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

DeepZoom基本知识

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

应用

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

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

事件

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

　　使用

后台代码：

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

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,0.5 * multiScaleImage1.ActualHeight)));

}

}
}

最后效果如图：

WP7 MultiScaleImage和DeepZoom

应用

分类

事件

使用

相关推荐