天天看點

AjaxControlToolkit--SeaDragon

9月30日的AjaxControlToolkit 30930裡增加了兩個新的控件:AsyncFileUpload和Seadragon,上次大略的寫了下AsyncFileUpload,這次就簡單的寫寫Seadragon吧,不過Seadragon還是不是很明白。有什麼問題望高手指出。

随着AjaxControlToolkit 30930加入了Seadragon控件,我們現在可以在本地實作這種類似DeepZoom的圖檔效果了,而且由于采用的是AJAX方式,是以不需要用戶端安裝任何插件(DeepZoom就必須Silverlight),廢話不少了,下面就來簡單說下Seadragon的使用吧。

要使用SeaDragon首先要準備圖檔,SeaDragon的SourceUrl要求是個xml或dzi檔案,這裡我們用Deep Zoom Composer來制作xml檔案吧。

我們首先打開Deep Zoom Composer,然後導入圖檔

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_6.png"></a>

然後排列下圖檔,排成我們喜歡的樣子(當然隻要一張圖檔也可以)

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_8.png"></a>

當然還有其他的一些功能,比如加菜單,連結之類的,不過有的好像在導出AJAX的時候不大好用,導出成Silverlight的時候好使。

最後就是導出了,選擇導出成SeaDragon AJAX

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_10.png"></a>

導出的進度條:

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_12.png"></a>

導出完成,打開看看生成了些啥吧

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_14.png"></a>

要用的就是上面的這兩個

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_16.png"></a>

将檔案dzc_output.xml和檔案夾dzc_output_files拷貝到我們Web的目錄下,然後就該畫網頁了。

首先建立個ASP.NET頁面,拖進去個ScriptManager,然後再拖進來個Seadragon,看看效果

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_18.png"></a>

下面切換到代碼視圖,我們來完善Seadragon的屬性。

最後看下效果:

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_22.png"></a>

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_24.png"></a>

<a href="http://images.cnblogs.com/cnblogs_com/sun8134/WindowsLiveWriter/AjaxControlToolkitSeaDragon_C9D8/image_26.png"></a>

上代碼,其實很簡單:

恩。差不多就這些吧,沒啥技術含量,最後貼下SeaDragon的屬性吧:

animationTime - The amount of time in seconds that animations should last. Default is 1.5.

blendTime - The amount of time in seconds that new tiles take to blend from transparent to opaque. Default is 0.5.

alwaysBlend - Whether tiles should always blend in and out, not just when they're first loaded. Default is false.

autoHideControls - Whether controls should get automatically hidden when the user's mouse is off the viewer and the image has stopped animating. Default is true.

immediateRender - Whether the most appropriate tiles should always be rendered first, before any lower-res tiles are rendered. This loses the "sharpening" effect and instead creates a very visible "tiling" effect. Default is false.

minZoomDimension - The minimum size (in screen pixels) of either dimension that can result from zooming out. Default is 16.

maxZoomPixelRatio - The maximum pixel ratio (screen pixel to content pixel) that can result from zooming in. Default is 4.

visibilityRatio - The minimum portion of the viewport that must show visible content in both dimensions. Default is 0.1.

springStiffness - Determines how sharply the springs used for animations move. Default is 5.0.

imageLoaderLimit - The maximum number of concurrent image downloads that can be performed by each viewer. Default is 2.

clickTimeThreshold - The maximum number of milliseconds that can pass between a mousedown and a mouseup for the action to still be considered a "quick" click. Default is 200.

clickDistThreshold - The maximum number of pixels the mouse can move between a mousedown and a mouseup for the action to still be considered a "quick" click. Default is 5.

zoomPerClick - The factor by which images should zoom when clicked on. Default is 2.

zoomPerSecond - The factor by which images should zoom over each second when the zoom buttons are held down. Default is 2.

sourceUrl - The path for all UI images. This can be absolute or relative. If relative, it must be relative to the HTML page. A change to this value will only affect new viewers. Default is "img/".

showNavigationControl - Whether navigation buttons should be shown.

其實,SeaDragon裡還能嵌套其他的一些東西,比如Menu,不過搗鼓的還不大明白,還望大家指點。

最後附上example裡嵌套Menu的一段代碼吧:

&lt;/ajaxToolkit:Seadragon&gt;

本文轉自 sun8134 部落格園部落格,原文連結: http://www.cnblogs.com/sun8134/archive/2009/11/05/1596636.html ,如需轉載請自行聯系原作者