Silverlight图片元素――创建DeepZoom应用程序

概述Silverlight 图片元素――创建 DeepZoom 应用程序 在上一篇博文中，我们介绍了 Deep Zoom Composer 的使用方法，下面我们就来自己做一个简单的图片缩放项目吧 ! 首先我们来看一下我们所要实现的效果： 现在我们就用到了我们用 Deep Zoom Composer 工具生成的项目文件了。我们把生成的文件复制到 VS2010 的 Silverlight 项目目录中。如果 Silverlight 图片元素――创建 DeepZoom 应用程序 在上一篇博文中，我们介绍了 Deep Zoom Composer 的使用方法，下面我们就来自己做一个简单的图片缩放项目吧 ! 首先我们来看一下我们所要实现的效果：

现在我们就用到了我们用 Deep Zoom Composer 工具生成的项目文件了。我们把生成的文件复制到 VS2010 的 Silverlight 项目目录中。如果我们使用的是动态生成测试页面，则需要将其复制到 \Bin\DeBUG 目录中；如果使用的是测试站点，则需要复制到 \ClIEntBin 中。由于 Deep Zoom 金字塔是以外部资源的形式存在，所以我们不需要添加到项目中。

下面我们需要在 XAML 文档中添加如下代码： <Canvas x:name="LayoutRoot" Background="White">

        <MultiScaleImage x:name="msi" WIDth="500" Height="400"

          Source="GeneratedImages/dzc_output.xml"

          MouseMove="msi_MouseMove"

          MouseleftbuttonDown="msi_MouseleftbuttonDown"

          MouseleftbuttonUp="msi_MouseleftbuttonUp"

          MouseLeave="msi_MouseLeave"/>

        <button Content=" 恢复 " WIDth="75" Canvas.left="264" Canvas.top="378" x:name="BtnResume" Click="BtnResume_lick"/>

        <button Content=" 放大 " WIDth="75" Canvas.left="0" Canvas.top="378" x:name="BtnBig" Click="BtnBig_lick"/>

        <button Content=" 缩小 " WIDth="75" Canvas.left="125" Canvas.top="378" x:name="BtnSmail" Click="BtnSmail_lick"/>

    </Canvas>

 

MultiScaleImage 对象使用来加载图片金字塔， Source 属性设置的是由 Deep Zoom Composer 生成的集合文件。然后我们添加了 3 个按钮用于实现恢复，放大，缩小图片的功能。下面我们来看一下隐藏类的代码： public partial class MainPage : UserControl

    {

        Point lastMouse = new Point();

        double _zoom = 1;

        bool mousebuttonPress = false;

        bool mouseIsDragging = false;

        Point dragOffSet;

        Point currentposition;

 

        public double ZoomFactor

        {

            get { return _zoom; }

            set { _zoom = value; }

        }

 

        public MainPage()

        {          

            InitializeComponent();

        }

 

        public voID Zoom(double zoom,Point pointToZoom)

        {

            Point logicalPoint = this.msi.ElementTologicalPoint(pointToZoom);

            this.msi.ZoomAboutLogicalPoint(zoom,logicalPoint.X,logicalPoint.Y);

        }

                   // 处理鼠标移动事件

        private voID msi_MouseMove(object sender,MouseEventArgs e)

        {

            if (mousebuttonPress)

            {

                mouseIsDragging = true;

            }

            // 处理非拖拽事件

            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.ActualHeight);

                msi.VIEwportOrigin = newOrigin;

            }

        }

                   // 处理鼠标左键按下事件

        private voID msi_MouseleftbuttonDown(object sender,MousebuttonEventArgs e)

        {

            mousebuttonPress = true;

            mouseIsDragging = false;

            dragOffSet = e.Getposition(this);

            currentposition = msi.VIEwportOrigin;

        }

                   // 处理鼠标左键d起事件

        private voID msi_MouseleftbuttonUp(object sender,MousebuttonEventArgs e)

        {

            mousebuttonPress = false;

            this.lastMouse = e.Getposition(this.msi);

            // 处理非拖拽事件

            if (mouseIsDragging == false)

            {

                bool shiftDowm = (Keyboard.ModifIErs & ModifIErKeys.Shift) == ModifIErKeys.Shift;

                ZoomFactor = 2.0;

                if (shiftDowm)

                {

                    ZoomFactor = 0.5;

                }

                Zoom(ZoomFactor,this.lastMouse);

            }

            mouseIsDragging = false;

        }

                   // 处理鼠标左键离开事件

        private voID msi_MouseLeave(object sender,MouseEventArgs e)

        {

            mouseIsDragging = false;

        }

                   // 实现图片恢复

        private voID BtnResume_lick(object sender,RoutedEventArgs e)

        {

            this.msi.VIEwportOrigin = new Point(0,0);

            this.msi.VIEwportWIDth = 1;

        }

// 实现图片放大

 

        private voID BtnBig_lick(object sender,RoutedEventArgs e)

        {

            Zoom(1.2,new Point(this.ActualWIDth / 2,this.ActualHeight / 2));

        }

// 实现图片缩小

        private voID BtnSmail_lick(object sender,RoutedEventArgs e)

        {

            Zoom(0.8,this.ActualHeight / 2));

        }

    }

 

在这里我们需要添加 3 个鼠标 Click 事件方法： BtnResume_lick ； BtnBig_lick ； BtnSmail_lick ，分别代表我们点击恢复，放大，缩小按钮。当我们点击这些按钮时，将会根据当前的逻辑坐标，调用 Zoom 方法调整缩放。其中 Zoom 方法第一个参数表示缩放倍数，如果大于 1 表示放大，小于 1 表示缩小，第二和第三个参数表示设置图片在 MultiScaleImage 对象区域中的新位置。点击恢复按钮会把我们的图片显示位置和宽度恢复初始值。

这里我们需要主要一段代码是：

this.lastMouse = e.Getposition(this.msi);

这句代码用于表示获取鼠标的逻辑位置，并将它作为参数给 Zoom （）。如果我们没有写这句话，图片放大的位置始终是对象区域的左上角，而不是我们选择的区域。 总结

以上是内存溢出为你收集整理的Silverlight图片元素――创建DeepZoom应用程序全部内容，希望文章能够帮你解决Silverlight图片元素――创建DeepZoom应用程序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。