`

WP7 学习之MultiScaleImage控件使用

    博客分类:
  • WP7
阅读更多

xaml:

<MultiScaleImage HorizontalAlignment="Left" Margin="36,80,0,0" Name="multiScaleImage1" VerticalAlignment="Top"  Width="382" Source="http://www.daisy123.com/MyDeepZoom/dzc_output.xml" ImageOpenSucceeded="multiScaleImage1_ImageOpenSucceeded" />

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Image/appbar.basecircle.rest.png" Text="full" Click="abbFull_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Image/appbar.favs.addto.rest.png" Text="Original" Click="abbOri_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Image/appbar.favs.rest.png" Text="zoomin" Click="abbZoomIn_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Image/appbar.feature.settings.rest.png" Text="zoomout" Click="abbZoomOut_Click"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

multiscaleImage 控件的Source的路径是要web路径

dzc_output.xml是张图片,要用Deep Zoom Composer工具生成

cs:

 public partial class MultiScaleImage : PhoneApplicationPage
    {

        private double zoom = 1;
        private bool isMoving = false;
        private bool isDown = false;
        private Point lastMouseDownPos = new Point();
        private Point lastMousePos = new Point();
        private Point lastMouseViewPort = new Point();

        public MultiScaleImage()
        {
            InitializeComponent();
        }

        //成功加载事件
        private void multiScaleImage1_ImageOpenSucceeded(object sender, RoutedEventArgs e)
        {
            //成功加载后 固定初始位置
            multiScaleImage1.ViewportOrigin = new Point(0, 0);
            multiScaleImage1.ViewportWidth = 1;
        }

        private void PhoneApplicationPage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //获取按下时图像坐标位置
            lastMouseDownPos = e.GetPosition(multiScaleImage1);
            //获取视区中心点位置
            lastMouseViewPort = multiScaleImage1.ViewportOrigin;
            //标识用户已经按下了 down
            isDown = true;
            //开始获取
            multiScaleImage1.CaptureMouse();
        }

        private void PhoneApplicationPage_MouseMove(object sender, MouseEventArgs e)
        {
            //获取移动的时候图像的坐标位置
            lastMousePos = e.GetPosition(multiScaleImage1);
            //条件为 按下了和没在移动中 才进入
            if (isDown && !isMoving)
            {
                //设为在移动
                isMoving = true;

                //获取视区窗口大小
                double w = multiScaleImage1.ViewportWidth;
                //获取视区窗口的坐标位置
                Point p = new Point(multiScaleImage1.ViewportOrigin.X, multiScaleImage1.ViewportOrigin.Y);
                //设置暂时还没移动效果
                multiScaleImage1.UseSprings = false;
                //把获取好的坐标值赋值
                multiScaleImage1.ViewportOrigin = new Point(p.X, p.Y);
                //把获取到的视区宽度赋值
                multiScaleImage1.ViewportWidth = w;
                //设置变焦数
                zoom = 1 / w;
                //启动移动效果
                multiScaleImage1.UseSprings = true;
            }
            //正在移动
            if (isMoving)
            {
                //将获取到按下时视区的中心位置
                Point point = lastMouseViewPort;
                //进行坐标进行
                point.X = (lastMouseDownPos.X - lastMousePos.X) / multiScaleImage1.ActualWidth * multiScaleImage1.ViewportWidth;
                point.Y = (lastMouseDownPos.Y - lastMousePos.Y) / multiScaleImage1.ActualWidth * multiScaleImage1.ViewportWidth;
                //将计算好的视区坐标进行赋值
                multiScaleImage1.ViewportOrigin = point;
            }

        }

        private void PhoneApplicationPage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isMoving)
            {
                bool isShift = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
                double newzoom = zoom;
                if (isShift)
                {
                    newzoom /= 2;
                }
                else
                {
                    newzoom *= 2;
                }


            }
            isMoving = false;
            isDown = false;
            Zoom(zoom, multiScaleImage1.ElementToLogicalPoint(this.lastMousePos));
            multiScaleImage1.ReleaseMouseCapture();
        }

        private void Zoom(double newzoom, Point p)
        {
            if (newzoom < 0.5)
            {
                newzoom = 0.5;
            }
            multiScaleImage1.ZoomAboutLogicalPoint(newzoom / zoom, p.X, p.Y);
            zoom = newzoom;
        }

        private void abbFull_Click(object sender, EventArgs e)
        {
            multiScaleImage1.ZoomAboutLogicalPoint(3, 0, 0);
        }

        private void abbOri_Click(object sender, EventArgs e)
        {
            this.multiScaleImage1.ViewportWidth = 1;
            this.multiScaleImage1.ViewportOrigin = new Point(0, 0);
        }

        private void abbZoomIn_Click(object sender, EventArgs e)
        {
            Zoom(zoom * 1.3, multiScaleImage1.ElementToLogicalPoint(new Point(0.5 * multiScaleImage1.ActualWidth, 0.5 * multiScaleImage1.Height)));
        }

        private void abbZoomOut_Click(object sender, EventArgs e)
        {
            Zoom(zoom / 1.3, multiScaleImage1.ElementToLogicalPoint(new Point(0.5 * multiScaleImage1.ActualWidth, 0.5 * multiScaleImage1.Height)));
        }


    }

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    silverlight 控件教程

    7. ChildWindow:ChildWindow是一个模态窗口,可以在主窗口之上弹出,阻止用户与主窗口的交互,常用于对话框或设置界面。 8. ComboBox:ComboBox结合了文本框和下拉列表,用户既可以输入,也可以从列表中选择,适合...

    Silverlight2.0功能展示Demo源码

    3、Silverlight(5) - 2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton 4、Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, ...

    WPF深缩放

    3. **使用MultiScaleImage控件**:在XAML中,你可以插入`MultiScaleImage`控件并设置其`Source`属性为XML配置文件的路径。这样,控件会自动加载和显示正确的图像层。 4. **交互处理**:WPF提供了一套完整的事件处理...

    Azure中的图像:上传,深度缩放查看,标记和注释

    文章介绍了基于Azure的软件来进行图像上传,使用Silverlight MultiScaleImage控件进行查看,标记和注释。 浏览器无需在用户机器/设备上进行任何额外安装即可执行操作(查看浏览器应支持Silverlight)。

    Deep Zoom Composer Demo1

    2. **Deep Zoom原理**:学习如何利用Deep Zoom技术构建可平移和缩放的图像,包括切片概念、MultiscaleImage类的使用以及如何处理图像的缩放级别。 3. **Deep Zoom Composer的使用**:掌握如何导入图像、设置参数、...

Global site tag (gtag.js) - Google Analytics