Silverlight图片元素――创建DeepZoom应用程序
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 class MainPage : 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, Point pointToZoom)
{
Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
}
//
处理鼠标移动事件
private void msi_MouseMove(object sender, 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 void msi_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
mouseButtonPress = true;
mouseIsDragging = false;
dragOffSet = e.GetPosition(this);
currentPosition = msi.ViewportOrigin;
}
//
处理鼠标左键弹起事件
private void msi_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(object sender, MouseEventArgs e)
{
mouseIsDragging = false;
}
//
实现图片恢复
private void BtnResume_lick(object sender, RoutedEventArgs e)
{
this.msi.ViewportOrigin = new Point(0, 0);
this.msi.ViewportWidth = 1;
}
//
实现图片放大
private void BtnBig_lick(object sender, RoutedEventArgs e)
{
Zoom(1.2, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
}
//
实现图片缩小
private void BtnSmail_lick(object sender, RoutedEventArgs e)
{
Zoom(0.8, new Point(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
（）。如果我们没有写这句话，图片放大的位置始终是对象区域的左上角，而不是我们选择的区域。