你的分享就是我们的动力 ---﹥

初试Deep Zoom Composer

时间:2012-07-02 13:47来源:www.chengxuyuans.com 点击:

准备

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. 图片若干

步骤

1. 打开Deep Zoom Composer ,新建Project ,Import 图片,图片将如 图显示在Deep Zoom Composer 的右侧

2. 点击Compose ,然后将右侧的图片摆放到中间的面板上,注意到下方有一些布局工具,大家可以用来做图片对齐,摆放完的图片将如 图所示

3. 点击Export ,导出图片,给它一个命名,点Export 按钮即可。我这里起名为Demo1Export

4. 打开Visual Studio 2008 ,新建一个Silverlight 项目,选择一个测试项目,我这里选择一个Web Application Project 作为测试 项目。

5. 我们之前用Deep Zoom Composer 导出的文件的文件夹内有个source images\OutputSdi 的文件夹,将它Copy 到我们用VS 创建的Web 项目的ClientBin 文件夹下(可能需要先编译一次Web 项目,注意不是Sliverlight 项目,而是它的测试工程中)

6. 导入文件后的项目如下所示。注意ClientBin 文件夹。

7. 点击Page.xaml ,修改代码如下:

<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>

这里因为我暂时没研究出怎么控制鼠标滚轮,所以没法做出那种滚动的效果(时间太迟了,不想去找了)…… 注意MultiScaleImage 节 点下的相关设置。我用于取代鼠标滚轮的做法是使用一个按钮来激活是否放大缩小。代码有点生硬,大家自己改造……

运行效果:

试着将ViewportWidth 修改为2.0 ,再次运行,效果将变为:

8. 点击Page.xmal.cs 文件,修改代码如下:

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));
     }
   }
}

值得注意的是ZoomAboutLogicalPoint 方法(试一下吧,试了你就知道…… )

这里用到了MouseWheelHelper 类,大家可以从 http://blois.us/Silverlight/Scrolling2/MouseWheelHelper.cs 下载,并添加到项目 中,具体用法我就不再赘述了……

9. 另外需要你添加一个Mouse 类,

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. 运行程序,得到下面的效果:

总结

有许多需要修改的地方,不过通过这个简单的示例你应该知道 http://memorabilia.hardrock.com/ 的效果并不至于难道哪里去,Deep Zoom Composer 为我们封装的API 太强大了,让我们不需要花费多少体力就可以做出很酷的效果了。还犹豫什么?快点开始用Silverlight2 吧……

转载注明地址:http://www.chengxuyuans.com/slverlight/41561.html