http://flashview.ddvip.com/2008_10/DeepZoomTest1.zip
下面
例子介绍了如何利用
刻钟时间快速实现个 Deep Zoom 应用
供您参考
1. 启动 Deep Zoom Composer 预览版
2. 使用 Deep Zoom Composer 创建 SDI(Sea Dragon Index) 文件集
选取使用照片
布置照片
输出 SDI 文件
输出结果
3. 使用 Visual Studio 2008 创建 Silverlight 网站WebSite应用
如果你没有安装 Silverlight 2 beta1
插件可以到这里下载
4. 添加 SDI 文件集到 ClientBin 目录下
5. 使用 <MultiScaleImage> 引用 info.bin
<MultiScaleImage x:Name="DeepZoomCan" Source="[yourfolder]/info.bin" Height="294" Width="456" Canvas.Left="68" Canvas.Top="51" />
在 Page.xaml 中使用 MultiScaleImage 标签引用 DZC 打包生成
编译文件 info.bin6. 编译
预览
7. 输入用户提示信息
您可以在 Expression Blend 2.5 3月预览版中调整文字
位置和大小您也可以使用 VS2008使用 <TextBlock /> 标签调整文字信息8. 添加鼠标键盘响应事件
在 Page.xaml.cs 中加入对鼠标和键盘
事件响应代码如下: 1: 
DeepZoomTest1
2: {
3: public partial 
Page : UserControl
4: {
5: Po
mousePosition = 
Po
;
6:
7: public Page
8: {
9: InitializeComponent;
10: InitializeMouseEvent;
11: }
12:
13: private void InitializeMouseEvent
14: {
15: this.MouseMove 
MouseEventHandler(Page_MouseMove);
16: this.KeyDown KeyEventHandler(Page_KeyDown);
17: }
18:
19: void Page_KeyDown(object sender, KeyEventArgs e)
20: {
21:
22: 
(e.Key 
Key.W)
23: {
24: Zoom(1.2f, mousePosition);
25:
26: }
27:
28: 
(e.Key Key.X)
29: {
30: Zoom(0.8f, mousePosition);
31: }
32:
33: {
34: HtmlPage.Window.Alert("请输入 W 或者 X 进行缩放!");
35: }
36: }
37:
38: void Page_MouseMove(object sender, MouseEventArgs e)
39: {
40: mousePosition = e.GetPosition(this);
41: }
42: public void Zoom(double zoom, Po poToZoom)
43: {
44: Po logicalPo = this.DeepZoomCan.ElementToLogicalPo(poToZoom);
45: this.DeepZoomCan.ZoomAboutLogicalPo(zoom, logicalPo.X, logicalPo.Y);
46: }
47: }
48: }9. 添加对用户提示
Alert 事件Silverlight 2 中原生支持了对页面中
DOM 
！！！为了给用户更多提示在 Silverlight 2 中你可以添加以下键盘事件判断给用户更好提示: 1:
2: {
3: HtmlPage.Window.Alert("请输入"W"或者"X"进行缩放!");
4: }注意:你需要在 Silverlight 2 项目
默认引用中添加如下 引用 1: using 
.Windows.Browser;10. 最终效果
最新评论