【全面解析DeepZoom 之三】建立DeepZoom应用

文章出处:http://www.cnblogs.com/zhouyinhui/archive/2008/04/14/1153371.html (周银辉)

与导出整图不一样,你不能这样使用:

1 <MultiScaleImage
2                x:Name="msi"
3                ViewportWidth="1.0"
4                Source="/XXXX/info.bin" MouseLeftButtonDown="msi_MouseLeftButtonDown" MouseLeftButtonUp="msi_MouseLeftButtonUp" MouseMove="msi_MouseMove"/>
View Code

而应该将info.bin替换成:items.bin,在导出的文件中你会找到该文件,这表示你导出的是一个集合。
这时运行你的程序你变可以看到一个图片集合显示在那里了,但可惜的是没有任何交互。在那之前我们先了解一下MultiScaleImage的几个重要属性(我不知道是不是我的Silverlight SDK版本不对,在MultiScaleImage中其关键的几个属性、方法与事件没有相关注释,所以有必要将我对这几个属性、方法、事件的理解列举一下)
Source:即DeepZoomComposer导出的文件(单个文件为Info.Bin,集合为Items.Bin)
SubImages:子图片,如果DeepZoomComposer导出的为集合的话,其将集合中每个元素作为一个MultiScaleSubImage对象存储在这个集合中。对子图片的操作就全靠它了。
UsingSprings:是否启用其默认动画(就是那中很飘逸的感觉,取消则比较生硬了)
Viewport: 视口位置(可以简单理解成眼睛所在位置,有过3D编程经验的比较容易理解)
ViewportWidth:视口宽度,视口越宽看到的东西越到(感觉上离图片越远,或图片缩小了)
AspectRatio:宽高比。
ElementToLogicPoint():从元素坐标(物理坐标)转换为逻辑坐标 (元素坐标则是我们平时所说的普通坐标,逻辑坐标则是指元素左上角为0,0点,右下角为1,1点而言的相对坐标)
LogicToElementPoint():与上述相反。
ZoomAboutLogicPoint(double, double, double):按逻辑坐标缩放,第一个参数指定缩放增量,后两个参数指定缩放中心。
MotionFinished事件:动画结束(或者说当你操作图片或子图后其运动结束)

关于子图:
每个子图是一个MultiScaleSubImage对象,其在MultiScaleImage的SubImages属性中

如何移动子图位置:
你可以通过指定该子图的ViportOrgin属性来指定它的位置,比如
subImage.ViportOrgin  = new Point(x,y);
所以如果你想将子图像WPF中一样排列成Grid元素一样,没办法,一个一个计算x,y然后指定吧。

如何缩放子图:
你可以通过子图的ViewportWidth属性来控制,值越大子图就越小。

如何显示或隐藏子图:
没有visibility或相关属性,但你可以通过设置其Opacity(不透明度)来实现。

如何获取指定子图的位置和大小(Rect)
参考这个方法:

 1 private Rect GetSubImageRect(MultiScaleImage msi, int index)
 2         {
 3             if (index < 0 || index >= msi.SubImages.Count)
 4             {
 5                 return Rect.Empty;
 6             }
 7 
 8             MultiScaleSubImage image = msi.SubImages[index];
 9             double scaleBy = 1 / image.ViewportWidth;
10 
11             return new Rect(-image.ViewportOrigin.X * scaleBy,
12                 -image.ViewportOrigin.Y * scaleBy,
13                 scaleBy,
14                 (1 / image.AspectRatio) * scaleBy);
15         }
View Code

如何根据X,Y坐标得到相应位置处的子图:
参考这个方法:

 1 private int GetImageIndexFromPosition(MultiScaleImage msi, Point pt)
 2         {
 3             pt = msi.ElementToLogicalPoint(pt);
 4 
 5             for (int i = 0; i < msi.SubImages.Count; i++)
 6             {
 7                 MultiScaleSubImage image = msi.SubImages[i];
 8                 double scaleBy = 1 / image.ViewportWidth;
 9                 Rect imageRect = this.GetSubImageRect(msi, i);
10                 if (imageRect.Contains(pt))
11                 {
12                     return i;
13                 }
14             }
15 
16             return -1;
17         }
View Code

 

posted @ 2013-12-11 14:52  银河系上的地球  阅读(641)  评论(0编辑  收藏  举报