Deep Zoom Composer (Step by Step | More Pictures) (cool + mandatory)

Today, I saw Brother Zhou's [Comprehensive Analysis of DeepZoom] Cool! The introduction of Deep Zoom, I think it's really cool, so I started to do it. It's not good. Let's take a look. Brother Zhou gave us a comprehensive explanation. I am just playing, so it is called a simple demonstration ......

Preparation

1. Visual Studio 2008

2. Deep Zoom Composer (http://blogs.msdn.com/expression/archive/2008/03/05/download-the-preview-of-the-deep-zoom-composer.aspx)

3. Silverlight beta2

4. Images

Procedure

1. Open Deep Zoom Composer, create a Project, and Import an image. The image is displayed on the Right of Deep Zoom Composer.

2. click Compose and place the picture on the right to the middle panel. You can use some layout tools below to align the picture.

3. Click Export to Export the image and give it a name. Click the Export button. I name it Demo1Export.

4. Open Visual Studio 2008, create a Silverlight Project, and select a test Project. Here I select a Web Application Project as the test Project.

5. the folder of the file exported with Deep Zoom Composer contains the source images \ OutputSdi folder, copy it to the ClientBin folder of the Web project we created with VS (you may need to compile the Web project first. Note that it is not a Sliverlight project, but a test project)

6. The project after the file is imported is as follows. Note the ClientBin folder.

7. Click Page. xaml and modify the Code as follows:

<UserControl x:Class="SA_DeepZoomComposerDemo1.Page"    xmlns="http://schemas.microsoft.com/client/2007"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >    <Grid    x:Name="LayoutRoot"    Background="AliceBlue">        <MultiScaleImage              x:Name="msi"              ViewportWidth="1.0"              Source="/demo1export/info.bin" MouseLeftButtonDown="msi_MouseLeftButtonDown" MouseLeftButtonUp="msi_MouseLeftButtonUp" MouseMove="msi_MouseMove"/>       </Grid></UserControl>

This is because I haven't figured out how to control the scroll wheel for the moment, so I can't make that scroll effect (it's too late to find it )...... Pay attention to the related settings under the MultiScaleImage node. The method I used to replace the scroll wheel is to use a button to activate whether to zoom in or out. The Code is a little stiff. You can transform it yourself ......

Running effect:

Try to change ViewportWidth to 2.0 and run it again. The effect will be changed:

8. Click the Page. xmal. cs file and modify the Code as follows:

using System;using System.Collections.Generic;using System.Linq;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 SA_DeepZoomComposerDemo1{    public partial class Page : UserControl    {        public Page()        {            InitializeComponent();            new MouseWheelHelper(msi).Moved += new EventHandler<MouseWheelEventArgs>(msi_Scroll);        }        Mouse _m = new Mouse();        private void msi_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)        {            _m.DownPosition = e.GetPosition(msi);        }        private void msi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)        {            _m.UpPosition = e.GetPosition(msi);            msi.ViewportOrigin = new Point(msi.ViewportOrigin.X + _m.UpInterval.X, msi.ViewportOrigin.Y + _m.UpInterval.Y);        }        private void msi_MouseMove(object sender, MouseEventArgs e)        {            _m.MovePosition = e.GetPosition(msi);        }        private void msi_Scroll(object sender, MouseWheelEventArgs e)        {            Point p = GetCenter();            if (e.Delta > 0)            {                msi.ZoomAboutLogicalPoint(1.1, p.X, p.Y);            }            else            {                msi.ZoomAboutLogicalPoint(0.9, p.X, p.Y);            }        }        private Point GetCenter()        {            double centreX = msi.Width / 2;            double centreY = (msi.Width / msi.AspectRatio) / 2; //            return msi.ElementToLogicalPoint(new Point(centreX, centreY));        }    }}

It is worth noting that the ZoomAboutLogicalPoint method (give it a try, you will know after trying ......)

The MouseWheelHelper class is used here ......

9. You need to add a Mouse class,

using System;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace SA_DeepZoomComposerDemo1{    public class Mouse    {        public Point DownPosition        {            get;            set;        }        public Point UpPosition        {            get;            set;        }        public Point MovePosition        {            get;            set;        }        public Point UpInterval        {            get            {                return new Point((DownPosition.X - UpPosition.X) / 1000, (DownPosition.Y - UpPosition.Y) / 1000);            }        }    }}

10. Run the program and get the following results:

Summary

There are a lot of things to be modified, but through this simple example, you should know that the effects of http://memorabilia.hardrock.com/are not as powerful as they are, and deep Zoom Composer is too powerful for our encapsulated APIs, so that we don't need to spend much effort to make a cool effect. What are you waiting? Get started with Silverlight2 ......

PS

Because a large number of images are included, you cannot package and upload them, if you need Source Code, leave your email address. (For more information about how to download and add images without images, see steps 1 to 5 .), I will send it as soon as possible ......