Silverlight图片元素——创建DeepZoom应用程序-CSDN博客

Silverlight图片元素——创建DeepZoom应用程序

在上一篇博文中，我们介绍了 Deep Zoom Composer 的使用方法，下面我们就来自己做一个简单的图片缩放项目吧 !

首先我们来看一下我们所要实现的效果：

现在我们就用到了我们用 Deep Zoom Composer 工具生成的项目文件了。我们把生成的文件复制到 VS2010 的 Silverlight 项目目录中。如果我们使用的是动态生成测试页面，则需要将其复制到 \Bin\Debug 目录中；如果使用的是测试站点，则需要复制到 \ClientBin 中。由于 Deep Zoom 金字塔是以外部资源的形式存在，所以我们不需要添加到项目中。

下面我们需要在 XAML 文档中添加如下代码：

<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"/>

</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 （）。如果我们没有写这句话，图片放大的位置始终是对象区域的左上角，而不是我们选择的区域。