silverlight:【全面解析DeepZoom 的 2】Silverlight2及Deep Zoom环境的搭建

  正所谓“工欲善其事必先利其器”环境搭建乃是最重要以前上大学时候阅过不少大师写教材章便是讲什么是Hello World但我却在环境搭建上郁闷得要死于是要在屏幕上显示条Hello World是那么艰难

  需要安装软件Software有Visual Studio 2008Silverlight2 beta1 tools for VS2008Expression Blend2.5 Deep Zoom Composer

  注意:在安装Silverlight2 beta1 tools for VS2008的前确保将你以前可能安装过Silverlight插件Silverlight SDK, Expression Blend等先卸载掉如果安装不了Silverlight2 beta1 tools for VS2008那么你VS2008中就找不到Silverlight2项目模板也就没法创建Sliverlight2项目了

  至于如何使用Silverlight和VS创建个Hello World项目大家可以参考Scott博客中文版中篇文章:使用Silverlight 2 和 VS 2008创建“Hello World”

  Blend使用想必大家都比较熟悉了如果有不熟悉可以到这里观看视频教程

  Deep Zoom Composer是个专为DeepZoom设计个小工具我翻译了它用户指南希望对你有所帮助:

  --------------------------分割线-------------------------------------

  Deep Zoom ComposerUser Guide

  周银辉译

  介绍

  微软Silverligth2包含了对由“SeaDargon”团队(Team)创建Deep Zoom技术支持简单地说Deep Zoom技术就是能让你查看很大副图片但仅仅将当前显示在你屏幕上部分发送到你浏览器里你也可以对图片进行平滑缩放和平铺这就像是在线地图将副很大图片划分成很多很小平铺图片然后将那些你正在查看发送到你屏幕上这所带来好处就是你不必花大量时间来下载副很大图片数据而这些甚至你从来就没有看或注意到过这项技术非常酷但说实话要为这些图片序列创建正确坐标信息却不是件容易事情而刚好Expression团队(Team)为我们带来了个工具我们暂时称为“DeepZoom Composer”

  Expression Deep Zone Composer 让我们可以按照任何方式排列个图片集中图片(很大图片哈)然后将他们最终排列方式发布到Silverlight2中个称为MultiScaleImageControl控件中去我们这个工具输出是平铺图个集合你最终将看到个XML文件个BIN文件以及个编号文件夹集合每个文件夹中包含着最终图片排列部分个MultiScaleImageControl控件中引用个BIN文件所用到XAML大致是这个样子:

  <MultiScaleImagex:Name=”deepZoomObject”Source=”samle/info.bin”/>

  谁会使用这样应用呢?任何对Silverlight2感兴趣并且想对大图进行缩放平铺等高级操作如果没有这项技术要想完成标准带宽下连接显得异常困难这个工具受众是些很平常用户有个几个很普通场景会用到地图是其中的另外个可能是在线广告其用于为产品提供个非常易于交互和非常细节观察角度

  接下来是描述下用户如何创建个Deep Zoom Composer app 项目排列导入图像最后输出为个DeepZoomImage.

  启动

  欢迎屏幕

  启动Deep Zoom Composer后用户会看到个飞溅屏幕(splash screen)紧接着是欢迎屏幕在欢迎屏幕上我们可以看到两个标签页:Project和Help.

  Project标签页为用户提供了个最近查看项目列表以及New Project和Open Project操作

  Help标签页提供了诸如User Guide的类有用信息

【全面解析DeepZoom 的 2】Silverlight2及Deep Zoom环境<img src='/icons/7562de.gif' />搭建

  项目

  Deep Zoom Composer项目结构如下:

  ·     Default Path: 项目存储在: C:"Users"<user>"Documents"Expression"Seadragon Projects"

  ·     Source Images: 所有项目都有个Source Images文件夹用于存放导入图片

  ·     Working Data: working data 目录包含了那些用于在面板上进行缩放数据

  ·     Project file: 每个项目都有个*.sdprj 文件用于包含项目相关信息

  ·     Output: 当用户选择导出个 .sdi (Seadragon Image) 文件时其将被输出到source images"OutputSdi 文件夹下.

【全面解析DeepZoom 的 2】Silverlight2及Deep Zoom环境<img src='/icons/7562de.gif' />搭建

  1工作区

  创建个Deep Zome Image工作流是这样:1.导入2.构图(排列)3.输出

  导入:

  在“导入工作区”中用户可以导入些图片到项目中

【全面解析DeepZoom 的 2】Silverlight2及Deep Zoom环境<img src='/icons/7562de.gif' />搭建

  图片栏:

  用户点击“Add images”按钮来导入图片这些图片将被显示在个图片栏中右击图片并选择“Delete from project”可以将图片从项目中删除

  图片预览:

  当用户选择图片栏中个图片时在左边可以看到它预览图其文件名尺寸文件大小等将显示在左下方

  用户可以指定文件夹但Deep Zoom Composer仅仅会导入合法图片文件类型也就是说其支持PNGJPEGTIFF和BMP这几种格式其他文件格式将被忽略注意:目前Deep Zoom Composer不支持同名文件导入

  构图(排列)

  “Compose”工作区为用户提供了定位和排列图片功能:

【全面解析DeepZoom 的 2】Silverlight2及Deep Zoom环境<img src='/icons/7562de.gif' />搭建

  图片栏

  在“Compose”工作区中被导入到项目图片被显示在图片栏用户可以拖放这些图片到画板中图片栏为用户提供了如下几个基础功能:

  “All Image”标签页在这里图片栏将显示项目中所有图片那些显示成半透明图片表示其正在被使用(即是被拖到了Compose工作区中)

  “Layer View”标签页这个标签页仅仅显示那些被Compostion使用中图片用户可以面板上箭头按钮来改变图片在画板上Z轴顺序

  “Visibility”在图片旁边眼睛图标用于设置该图片在画板上可见性

  画板

  用户可以在Compose工作区画板中创建和编辑“Compositions”该工作区提供了

  个拥有定位和排列图片能力设计区和个基础工具集(selection, pan, zoom)以及基础排列特性(align & distribute)可以通过拖拽方式将图片栏图片添加到画板中用户可以在画板中排列这些图片并通过导航器来导航以及使用几种工具来修改当然用户也可以通过拖拽修饰器(技术图片选中状态下几个小方块)和下面排按钮来修改和布局

  工具:    

  选择工具其允许用户选择和操作图片用户可以通过Adorner(修饰器?那几个小东东真不知道专业名称叫什么抱歉)来操作图片

  Pan工具其允许用户通过点击和拖拽来滚动可视区域



  缩放工具当用户选择缩放工具是其可以点击可视区域中任何个位置来缩放放大该点当按住ALT并单击时缩小或使用ALT快捷键来思路方法或ALT+-快捷键来缩小如果用户点击最后个缩放图标(普通缩放图标右边那个)在画板中当前元素将被缩放以适合屏幕

  布局功能:

  其也支持些布局和分配功能(比如Make same height)

【全面解析DeepZoom 的 2】Silverlight2及Deep Zoom环境<img src='/icons/7562de.gif' />搭建

  当用户点击“Align/Distribute”和“Make Same”图标时将执行下面这些选择(的):

  左对齐左右居中对齐右对齐上对齐上下居中下对齐横向分布纵向分布等宽等高



Tags:  silverlight2 silverlight.2.0 silverlight是什么 silverlight

延伸阅读

最新评论

发表评论