WP7 学习之MultiScaleImage控件运用

2012-08-15

WP7 学习之MultiScaleImage控件使用xaml:MultiScaleImage HorizontalAlignmentLeft Margin36,80,0,0

WP7 学习之MultiScaleImage控件使用

xaml:

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

??? }

热点排行

图形图像

WP7 学习之MultiScaleImage控件运用