Silverlight图片元素——创建DeepZoom应用程序
在上一篇博文中，我们介绍了Deep Zoom Composer的使用方法，下面我们就来自己做一个简单的图片缩放项目吧!
首先我们来看一下我们所要实现的效果：
现在我们就用到了我们用Deep Zoom Composer工具生成的项目文件了。我们把生成的文件复制到VS2010的Silverlight项目目录中。如果我们使用的是动态生成测试页面，则需要将其复制到\Bin\Debug目录中；如果使用的是测试站点，则需要复制到\ClientBin中。由于Deep Zoom金字塔是以外部资源的形式存在，所以我们不需要添加到项目中。
下面我们需要在XAML文档中添加如下代码：
<Canvas x:Name="LayoutRoot"Background="White">
<MultiScaleImage x:Name="msi" Width="500"Height="400"
Source="GeneratedImages/dzc_output.xml"
MouseMove="msi_MouseMove"
MouseLeftButtonDown="msi_MouseLeftButtonDown"
MouseLeftButtonUp="msi_MouseLeftButtonUp"
MouseLeave="msi_MouseLeave"/>
<Button Content="恢复"Width="75" Canvas.Left="264" Canvas.Top="378"x:Name="BtnResume" Click="BtnResume_lick"/>
<Button Content="放大"Width="75" Canvas.Left="0" Canvas.Top="378"x:Name="BtnBig" Click="BtnBig_lick"/>
<Button Content="缩小"Width="75" Canvas.Left="125" Canvas.Top="378"x:Name="BtnSmail" Click="BtnSmail_lick"/>
</Canvas>
MultiScaleImage对象使用来加载图片金字塔，Source属性设置的是由Deep Zoom Composer生成的集合文件。然后我们添加了3个按钮用于实现恢复，放大，缩小图片的功能。下面我们来看一下隐藏类的代码：
public partial classMainPage : UserControl
{
Point lastMouse = new Point();
double _zoom = 1;
bool mouseButtonPress = false;
bool mouseIsDragging = false;
Point dragOffSet;
Point currentPosition;
public double ZoomFactor
{
get { return _zoom; }
set { _zoom = value; }
}
public MainPage()
{
InitializeComponent();
}
public void Zoom(double zoom, PointpointToZoom)
{
Point logicalPoint =this.msi.ElementToLogicalPoint(pointToZoom);
this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
}
//处理鼠标移动事件
private void msi_MouseMove(objectsender, MouseEventArgs e)
{
if (mouseButtonPress)
{
mouseIsDragging = true;
}
//处理非拖拽事件
if (mouseIsDragging)
{
Point newOrigin = new Point();
newOrigin.X = currentPosition.X- (((e.GetPosition(msi).X - dragOffSet.X) / msi.ActualWidth) *msi.ViewportWidth);
newOrigin.Y = currentPosition.Y- (((e.GetPosition(msi).Y - dragOffSet.Y) / msi.ActualHeight) *msi.ActualHeight);
msi.ViewportOrigin = newOrigin;
}
}
//处理鼠标左键按下事件
private voidmsi_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
mouseButtonPress = true;
mouseIsDragging = false;
dragOffSet = e.GetPosition(this);
currentPosition = msi.ViewportOrigin;
}
//处理鼠标左键弹起事件
private voidmsi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
mouseButtonPress = false;
this.lastMouse =e.GetPosition(this.msi);
//处理非拖拽事件
if (mouseIsDragging == false)
{
bool shiftDowm =(Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
ZoomFactor = 2.0;
if (shiftDowm)
{
ZoomFactor = 0.5;
}
Zoom(ZoomFactor,this.lastMouse);
}
mouseIsDragging = false;
}
//处理鼠标左键离开事件
private void msi_MouseLeave(objectsender, MouseEventArgs e)
{
mouseIsDragging = false;
}
//实现图片恢复
private void BtnResume_lick(objectsender, RoutedEventArgs e)
{
this.msi.ViewportOrigin = newPoint(0, 0);
this.msi.ViewportWidth = 1;
}
//实现图片放大
private void BtnBig_lick(object sender,RoutedEventArgs e)
{
Zoom(1.2, newPoint(this.ActualWidth / 2, this.ActualHeight / 2));
}
//实现图片缩小
private void BtnSmail_lick(objectsender, RoutedEventArgs e)
{
Zoom(0.8, newPoint(this.ActualWidth / 2, this.ActualHeight / 2));
}
}
在这里我们需要添加3个鼠标Click事件方法：BtnResume_lick；BtnBig_lick；BtnSmail_lick，分别代表我们点击恢复，放大，缩小按钮。当我们点击这些按钮时，将会根据当前的逻辑坐标，调用Zoom方法调整缩放。其中Zoom方法第一个参数表示缩放倍数，如果大于1表示放大，小于1表示缩小，第二和第三个参数表示设置图片在MultiScaleImage对象区域中的新位置。点击恢复按钮会把我们的图片显示位置和宽度恢复初始值。
这里我们需要主要一段代码是：
this.lastMouse = e.GetPosition(this.msi);
这句代码用于表示获取鼠标的逻辑位置，并将它作为参数给Zoom（）。如果我们没有写这句话，图片放大的位置始终是对象区域的左上角，而不是我们选择的区域。