Deep Zoom Composer,Silverlight图片展示技术 -[Silverlight开发]
2011-04-10 11:04
197 查看
Silverlight中的Deep Zoom技术能做的比只是深度放大高分辨率图像多很多。Deep Zoom Composer使得你能创建包含幻灯片、内置导航、网页链接、tooltips等的交互式内容,而不用写一行代码。Deep Zoom是Silverlight展示大分辩率图片的一个好办法,我们可以点击以下的这个网站去体验一下Deep Zoom技术的美妙之处: 体验
通过Import,用户可以导入一些图片到项目中
Compose工作区为用户提供了定位和排列图片的功能
输出工作区中为用户提供了导出为Deep Zoom Image或集合的功能
其他一些操作看下说明就很容易入手的。
Compose面板的各个功能如下:
图片栏:
在Compose工作区中,被导入到项目的图片被显示在图片栏,用户可以拖放这些图片到画板中。图片栏为用户提供了如下几个基础的功能:"All Image"标签页,在这里图片栏将显示项目中的所有图片。那些显示成半透明的图片表示其正在被使用(即是被拖到了Compose工作区中) "Layer View"标签页,这个标签页仅仅显示那些被Compostion使用中的图片。用户可以面板上的箭头按钮来改变图片在画板上的Z轴顺序。 "Visibility"在图片旁边的眼睛图标用于设置该图片在画板上的可见性。
画板:
用户可以在Compose工作区的画板中创建和编辑"Compositions"。该工作区提供了一个拥有定位和排列图片能力的设计区和一个基础工具集(selection, pan, zoom)以及基础的排列特性(align and distribute)。可以通过拖拽的方式将图片栏的图片添加到画板中,用户可以在画板中排列这些图片并通过导航器来导航以及使用几种工具来修改。当然,用户也可以通过拖拽修饰器(技术图片选中状态下的几个小方块)和下面的一排按钮来修改和布局。
工具:
选择工具,其允许用户选择和操作图片。用户可以通过装饰器来操作图片。 Pan工具,其允许用户通过点击和拖拽来滚动可视区域,整体的拖动整个面板。缩放工具,当用户选择缩放工具是,其可以点击可视区域中的任何一个位置来缩放放大该点。当按住ALT并单击时缩小,或使用ALT+=快捷键来方法或ALT+-快捷键来缩小。如果用户点击最后一个缩放图标(普通缩放图标的右边那个),在画板中的当前元素将被缩放以适合屏幕。
定位完毕后选择Export,导出工程,可以看到Export时有下面的选项:
在DeepZoomComposer中导出的时候“CreateCollection ”选项。这里决定了你导出的是一张整图还是一个图片集合,在这里我选择导出一个集合。在导出之前可以选择Preview来预览一下先。
可以看到,Deep Zoom Composer已经为我们快速方便的生成了一个图片展示窗口。
Deep Zoom Composer下载地址
Expression Blend 开发指南
初试Deep Zoom Composer(Step by Step|More Pictures)
一、Deep Zoom Composer环境搭配
在"更多共享资源"内下载安装文件安装即可。二、Deep Zoom Composer详解
打开Deep Zoom Composer后操作界面如下:通过Import,用户可以导入一些图片到项目中
Compose工作区为用户提供了定位和排列图片的功能
输出工作区中为用户提供了导出为Deep Zoom Image或集合的功能
其他一些操作看下说明就很容易入手的。
三、Deep Zoom实战开发
新建一个工程,在工作区按Add image,在弹出的文件选择框里选择你要添加进来的图片。然后点击Compose进行排版定位窗口。Compose面板的各个功能如下:
图片栏:
在Compose工作区中,被导入到项目的图片被显示在图片栏,用户可以拖放这些图片到画板中。图片栏为用户提供了如下几个基础的功能:"All Image"标签页,在这里图片栏将显示项目中的所有图片。那些显示成半透明的图片表示其正在被使用(即是被拖到了Compose工作区中) "Layer View"标签页,这个标签页仅仅显示那些被Compostion使用中的图片。用户可以面板上的箭头按钮来改变图片在画板上的Z轴顺序。 "Visibility"在图片旁边的眼睛图标用于设置该图片在画板上的可见性。
画板:
用户可以在Compose工作区的画板中创建和编辑"Compositions"。该工作区提供了一个拥有定位和排列图片能力的设计区和一个基础工具集(selection, pan, zoom)以及基础的排列特性(align and distribute)。可以通过拖拽的方式将图片栏的图片添加到画板中,用户可以在画板中排列这些图片并通过导航器来导航以及使用几种工具来修改。当然,用户也可以通过拖拽修饰器(技术图片选中状态下的几个小方块)和下面的一排按钮来修改和布局。
工具:
选择工具,其允许用户选择和操作图片。用户可以通过装饰器来操作图片。 Pan工具,其允许用户通过点击和拖拽来滚动可视区域,整体的拖动整个面板。缩放工具,当用户选择缩放工具是,其可以点击可视区域中的任何一个位置来缩放放大该点。当按住ALT并单击时缩小,或使用ALT+=快捷键来方法或ALT+-快捷键来缩小。如果用户点击最后一个缩放图标(普通缩放图标的右边那个),在画板中的当前元素将被缩放以适合屏幕。
定位完毕后选择Export,导出工程,可以看到Export时有下面的选项:
在DeepZoomComposer中导出的时候“CreateCollection ”选项。这里决定了你导出的是一张整图还是一个图片集合,在这里我选择导出一个集合。在导出之前可以选择Preview来预览一下先。
可以看到,Deep Zoom Composer已经为我们快速方便的生成了一个图片展示窗口。
四、与窗口交互(MultiScaleImage属性的分析)
待更新。更多共享资源
官方说明文档Deep Zoom Composer下载地址
Expression Blend 开发指南
初试Deep Zoom Composer(Step by Step|More Pictures)
相关文章推荐
- 基于silverlight 的deepzoom技术海量图片展示
- 极客技术专题【002期】:开发小技巧 - 如何使用jQuery来处理图片坏链?
- 微信开发之调起摄像头、本地展示图片、上传下载图片
- GeoServer地图开发解决方案(五):基于Silverlight技术的地图客户端实现
- DeskViewer基于Silverlight 2.0开发的个性相册展示系统
- openseadragon.js与deep zoom java实现艺术品图片展示
- 一起谈.NET技术,Silverlight 游戏开发小技巧:血条和进度条
- 一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单
- ios开发——用UITableView展示多行多列图片
- 一起谈.NET技术,使用DeeepZoom Composer进行富图像应用的开发(翻译--1)
- Android开发笔记——以Volley图片加载、缓存、请求及展示为例理解Volley架构设计
- Silverlight开发的物业管理系统展示
- 毕业设计项目展示作品四:基于iOS平台《百思不得姐》(似快手APP)Xcode开发技术研究与实现
- iOS开发所有KeyboardType与图片对应展示
- android开发步步为营之83:android图片处理技术之二(通过Matrix移动缩放旋转错切)
- Silverlight图片处理——Deep Zoom Composer
- GeoServer地图开发解决方案(五):基于Silverlight技术的地图客户端实现
- GeoServer地图开发解决方案(五):基于Silverlight技术的地图客户端实现
- 谷歌工程师利用和语言翻译类似的技术开发出了一个用于翻译图片主题的机器学习算法
- AJAX 图片展示框架56个 提升开发效率第1/2页