Deepzoom是silverlight2.0的新特性之一,通过它,用户可以无限放大图片以浏览清晰的图片。以下就通过一个简单的实例来实现一个deepzoom应用。
首先启动Deep Zoom Composer (这个东西最近刚更新,给出的下载地址是最新版本的,界面可能会和下面的图有点不同但功能都是一样的):
![1](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/1_thumb.png?resize=244%2C189)
新建一个project,然后输入project名字
![projectname](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/projectname_thumb.jpg?resize=244%2C144)
接下来就可以看到如下的界面
![userface](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/userface_thumb.jpg?resize=402%2C276)
然后选择Add image,把图片文件导入到project中。
![3](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/3_thumb.jpg?resize=244%2C95)
然后选择上方的Compose,把图片按照你想的方式排列好。这个时候在下方可以看到这样一条工具栏:
![5](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/5_thumb.jpg?resize=418%2C44)
从第5个图标开始就是内建的一些排列方式,有向左或右对齐、水平或垂直对齐等等。比如这次我就做了类似于九宫格的排列方式:
![6](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/6_thumb.jpg?resize=406%2C272)
然后就可以导出了:
![7](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/7_thumb.jpg?resize=298%2C93)
导出后即得到如下SDI文件:
![outputdata](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/outputdata_thumb.jpg?resize=389%2C265)
至此,deep zoom应用的图片源文件就制作完成了,下面就是设计和coding部分了。
启动visual studio 2008,新建silverlight工程。然后复制如上的SDI文件粘贴到Clientbin文件夹下:
![clientbin](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/clientbin_thumb.jpg?resize=141%2C272)
之后在page.xml使用<MultiScaleImage>应用文件中的info.bin文件
<MultiScaleImage Source=”ws2008/info.bin” Height=”440″ x:Name=”ws2008rtm” Width=”600″ Canvas.Left=”20″ Canvas.Top=”20″ Grid.Row=”0″ Grid.RowSpan=”6″ Grid.Column=”0″ Grid.ColumnSpan=”3″/>
之后可以编辑page.xml.cs,加入一些鼠标事件,比如拖动阿、使用滚轮放大缩小等等。
部分源代码如下,本来想上传到skydrive上的,但是最近国内电信访问不了,需要完整的可以发e-mail给我,[email protected]:
这里用到了MouseWheelHelper类,以下为部分MouseWheelHelper类的源代码,需要的依然可以给我mail。
![mousecode](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/mousecode_thumb.jpg?resize=323%2C270)
按f5进行调试并预览:
![result](https://i0.wp.com/aaronmix.net/wp-content/uploads/Deepzoom_D9EC/result_thumb.jpg?resize=389%2C293)
至此,一个简单的deep zoom应用做完了,需要完整solution的可以发e-mail给我: [email protected] 。
Continue reading “Deepzoom教程”