使用DeepZoom打造超酷變形金剛SHOW

使用DeepZoom打造變形金剛SHOW 

DeepZoom技術是Silverlight 2中加入的全新特性，你能夠把DeepZoom簡單的理解爲一項基於位圖的局部加載和縮放的技術，

http://memorabilia.hardrock.com/就是這項技術的典型應用，如圖所示。

這個頁面中包括300幅高分辯率的位圖，可想而知，若是將這些圖片按順序所有都下載到客戶端瀏覽器將須要耗費大量的時間和帶寬，而且用戶關心的內容也不可以在第一時間查看，可是DeepZoom技術能夠把一幅或一組圖片分割成多個部分，根據用戶瀏覽圖像的位置來進行選擇性的加載，當用戶查看一幅清晰度很高、容量較大的圖片時，DeepZoom僅僅加載用戶須要瀏覽位置的內容，而且用戶能夠輕鬆的使用鼠標鍵來拖動和縮放圖片，這樣極大的減小了用戶等待的時間，爲用戶帶來一種很酷的交互方式和瀏覽體驗，放大圖片如圖所示。

對於開發者而言，應用DeepZoom技術，你只須要下載並安裝 DeepZoomComposer，DeepZoomComposer程序工做界面如圖所示。

使用DeepZoomComposer能夠讓你快速完成具備DeepZoom技術的Silverlight應用程序，下面就使用DeepZoomComposer製做一個變形金剛SHOW程序。

首先在DeepZoomComposer啓動界面中建立一個新項目，如圖所示。

 

DeepZoom工做界面主要分爲三個工做區，同時又是製做DeepZoom的三個步驟，分別是導入、構圖和輸出。

導入：

在導入區中你能夠將項目中所須要的圖片導入到DeepZoomComposer項目中，點擊Add Image按鈕選擇須要導入的圖片，導入的過程當中會出現Importing進度條窗口，導入完成後的圖片會在右側列表中顯示出來。

構圖：

完成圖片的導入後，你就能夠將對程序界面中須要用到圖片的拖動到排列區中，在這裏你能夠使用下方的佈局工具，如圖所示，對圖片的位置、大小和對齊方式進行佈局，右側的All Image選項是顯示項目導入所有圖片列表，Layer View是顯示那些在構圖區中用到的圖片列表。

輸出：

完成導入和排列後，一個簡單的DeepZoom應用程序就完成了，經過DeepZoomComposer的輸入功能將完成的DeepZoom應用程序輸入爲一個Silverlight 2應用程序項目，輸出前能夠預覽程序運行結果，如圖所示。

 

選擇Silverlight Export選項，在Silverlight Export選項中，你須要輸入Silverlight應用程序名稱和輸出文件夾，並選擇輸出的圖片類型，點擊Export（輸出）會出現輸出處理進度窗口，如圖所示，完成後會顯示輸出完成窗口，如圖所示，這樣一個應用DeepZoom技術的Silverlight 2應用程序項目就完成了，使用Visual Studio 2008打開並運行輸出的文件夾中的Silverlight 2項目，程序運行結果如圖所示。

 

 

XAML代碼：

 

<UserControl x:Class="DeepZoomProject.Page"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
    Width="780" Height="450">
    <Grid Background="White">
     <MultiScaleImage x:Name="msi" Width="780" Height="400"/>
    </Grid>
</UserControl>

 

C#代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace DeepZoomProject
{
    public partial class Page : UserControl
    {
        //
        // Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
        //
        Point lastMousePos = new Point();

        double _zoom = 1;
        bool mouseButtonPressed = false;
        bool mouseIsDragging = false;
        Point dragOffset;
        Point currentPosition;

        public double ZoomFactor
        {
            get { return _zoom; }
            set { _zoom = value; }
        }

        public Page()
        {
            InitializeComponent();

            //
            // We are setting the source here, but you should be able to set the Source property via
            //
            this.msi.Source = new DeepZoomImageTileSource(new Uri("GeneratedImages/dzc_output.xml", UriKind.Relative));

            //
            // Firing an event when the MultiScaleImage is Loaded
            //
            this.msi.Loaded += new RoutedEventHandler(msi_Loaded);

            //
            // Firing an event when all of the p_w_picpaths have been Loaded
            //
            this.msi.ImageOpenSucceeded += new RoutedEventHandler(msi_ImageOpenSucceeded);

            //
            // Handling all of the mouse and keyboard functionality
            //
            this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (mouseButtonPressed)
                {
                    mouseIsDragging = true;
                }
                this.lastMousePos = e.GetPosition(this.msi);
            };

            this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseButtonPressed = true;
                mouseIsDragging = false;
                dragOffset = e.GetPosition(this);
                currentPosition = msi.ViewportOrigin;
            };

            this.msi.MouseLeave += delegate(object sender, MouseEventArgs e)
            {
                mouseIsDragging = false;
            };

            this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseButtonPressed = false;
                if (mouseIsDragging == false)
                {
                    bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;

                    ZoomFactor = 2.0;
                    if (shiftDown) ZoomFactor = 0.5;
                    Zoom(ZoomFactor, this.lastMousePos);
                }
                mouseIsDragging = false;
            };

            this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (mouseIsDragging)
                {
                    Point newOrigin = new Point();
                    newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth) * msi.ViewportWidth);
                    newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);
                    msi.ViewportOrigin = newOrigin;
                }
            };

            new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)
            {
                e.Handled = true;
                if (e.Delta > 0)
                    ZoomFactor = 1.2;
                else
                    ZoomFactor = .80;

                Zoom(ZoomFactor, this.lastMousePos);
            };
        }

        void msi_ImageOpenSucceeded(object sender, RoutedEventArgs e)
        {
            //If collection, this gets you a list of all of the MultiScaleSubImages
            //
            //foreach (MultiScaleSubImage subImage in msi.SubImages)
            //{
            //    // Do something
            //}
        }

        void msi_Loaded(object sender, RoutedEventArgs e)
        {
            // Hook up any events you want when the p_w_picpath has successfully been opened
        }

        public void Zoom(double zoom, Point pointToZoom)
        {
            Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
            this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
        }

        /*
         *  Sample event handlerrs tied to the Click of event of various buttons for
         *  showing all p_w_picpaths, zooming in, and zooming out!
         *
        private void ShowAllClick(object sender, RoutedEventArgs e)
        {
            this.msi.ViewportOrigin = new Point(0, 0);
            this.msi.ViewportWidth = 1;
            ZoomFactor = 1;
        }

        private void zoomInClick(object sender, RoutedEventArgs e)
        {
            Zoom(1.2, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
        }

        private void zoomOutClick(object sender, RoutedEventArgs e)
        {
            Zoom(.8, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
        }
         * */
    }
}

 

放大後效果:

 

Deep Zoom Composer 下載地址:http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en