WindowsPhone開發—— 使用手繪圖片作景區導覽地圖

　　前些日子在作景區App遇到需求，使用手繪圖片作一個簡易的地圖，支持放大縮小平移以及顯示景點Mark，安卓上可使用一個叫作「mAppWidget」的開源庫來完成，WP上有人建議用ArcGIS，可是考慮到只是簡單的放大縮小平移以及展現Mark標記，不必再去花費精力去大費周折的研究ArcGIS，因而就各類搜索WP下的放大縮小平移圖片的文章，還好很慶幸找到一篇（鏈接地址給忘記了原做者若是看到的話但願能提醒下給加上原連接）。解決了對圖片放大縮小平移的問題，剩下的就是在上面添加Mark標記點了以及解決每次放大縮小後的Mark從新定位的問題。很少說。上代碼！

 

前端XAML：

    <!--LayoutRoot 是包含全部頁面內容的根網格-->
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Padding="12,12,0,18"  Grid.Row="0" Style="{StaticResource SinglePageHeardStyle}"  >
            <TextBlock FontSize="28" Text="地圖導覽"/>
        </Border>

        <Grid x:Name="ContentPanel" Grid.Row="1" >
            <ViewportControl  x:Name="Viewport" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Canvas x:Name="can_Map" Width="480" Height="800">
                    <Image x:Name="Image" Stretch="Uniform"
                       CacheMode="BitmapCache"
                       ManipulationStarted="Viewport_ManipulationStarted" 
                       ManipulationDelta="Viewport_ManipulationDelta"
                       ManipulationCompleted="Viewport_ManipulationCompleted" >
                    </Image>
                </Canvas>
            </ViewportControl>
        </Grid>
    </Grid>

　　

後臺cs:

    public partial class MapPage : PhoneApplicationPage
    {
        private const double IMAGE_MAX_WIDTH = 2048;

        private const double IMAGE_MAX_HEIGHT = 2048;

        private double _width = 0;

        private double _height = 0;

        private double _scale = 1.0;
        private Point _relativeCenter;
        private bool _pinching = false;

        private WriteableBitmap _writeableBitmap;

        public MapPage()
        {
            InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            var bitmapImage = GetImgForRes();
            _writeableBitmap = new WriteableBitmap(bitmapImage);

            double scale;

            if (_writeableBitmap.PixelWidth > _writeableBitmap.PixelHeight)
            {
                scale = IMAGE_MAX_WIDTH / _writeableBitmap.PixelWidth;
            }
            else
            {
                scale = IMAGE_MAX_HEIGHT / _writeableBitmap.PixelHeight;
            }

            _width = _writeableBitmap.PixelWidth * scale;
            _height = _writeableBitmap.PixelHeight * scale;



            this.Image.Source = _writeableBitmap;
            ConfigureViewport();

            App.MapViewModel.GetSp(App.GetUserAcction());
            App.MapViewModel.GetMapSpCompleted += () =>
            {
                foreach (var item in App.MapViewModel.ScencParentByMobile.Data)
                {
                    //計算當前每一個Mark的寬高與當前手繪圖片的寬高縮放比例
                    item.Sh = (item.MapY -30) / _height;
                    item.Sw = (item.MapX - 30) / _width;
                    Image el = new Image();
                    //SetLeft 和SetTop 是根據元素的（0,0）點座標開始的 因此放置座標Mark的時候要減去元素寬的一半和元素高度
                    Canvas.SetLeft(el, (Image.Width * item.Sw) - 30);
                    Canvas.SetTop(el, (Image.Height * item.Sh) - 60);
                    el.Height = el.Width = 60;
                    el.Stretch = Stretch.Uniform;
                    //根據業務區選擇加載哪一個圖片
                    if (item.IsFlag == 1)
                        el.Source = new BitmapImage(new Uri("/MapPage/scenic_pointer_gril@2x.png", UriKind.RelativeOrAbsolute));
                    else
                        el.Source = new BitmapImage(new Uri("/MapPage/scenic_pointer@2x.png", UriKind.RelativeOrAbsolute));
                    el.Tag = item.SCID + "|" + item.Sw + "|" + item.Sh;   //記錄每一個Mark的id 寬高縮放比例到Tag以備用
                    can_Map.Children.Add(el);
                }
            };
        }

        private void ConfigureViewport()
        {
            if (_width < _height)
            {
                _scale = Viewport.ActualHeight / _height;
            }
            else
            {
                _scale = Viewport.ActualWidth / _width;
            }

            Image.Width = _width * _scale;
            Image.Height = _height * _scale;

            Viewport.Bounds = new Rect(0, 0, Image.Width, Image.Height);
            Viewport.SetViewportOrigin(new Point(Image.Width / 2 - Viewport.Viewport.Width / 2, Image.Height / 2 - Viewport.Viewport.Height / 2));

        }

        private static BitmapImage GetImgForRes()
        {
            string fileName = "/QWCProject;component/MapPage/map.jpg";

            using (Stream stream = Application.GetResourceStream(new Uri(fileName, UriKind.Relative)).Stream)
            {
                BitmapImage bitmapImage = new BitmapImage();
                bitmapImage.SetSource(stream);
                return bitmapImage;
            }
        }

        private void Viewport_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
        {
            if (_pinching)
            {
                e.Handled = true;

                CompletePinching();
            }
        }

        private void CompletePinching()
        {
            _pinching = false;

            double sw = Image.Width / _width;
            double sh = Image.Height / _height;

            _scale = Math.Min(sw, sh);

            //完成縮放放大後獲取全部Mark點集合
            var markList = WPTools.VisualTreeTool.GetChildObjects<Image>(can_Map, typeof(Image));
            foreach (var item in markList)
            {
                //過濾手繪圖片
                if (item.Tag == null)
                    continue;
                //根據當前Image（手繪圖片）的寬高乘以該Mark的座標縮放比例得出縮放放大後的每一個Mark的座標
                Canvas.SetLeft(item, (Image.Width * double.Parse(item.Tag.ToString().Split('|')[1])) - 30);
                Canvas.SetTop(item, (Image.Height * double.Parse(item.Tag.ToString().Split('|')[2])) - 60);
                item.Visibility = Visibility.Visible;
            }
        }

        private void Viewport_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            if (e.PinchManipulation != null)
            {
                //獲取全部Mark 在縮放放大時候隱藏全部Mark
                var markList = WPTools.VisualTreeTool.GetChildObjects<Image>(can_Map, typeof(Image));
                foreach (var item in markList)
                {
                    if (item.Tag == null)
                        continue;
                    item.Visibility = Visibility.Collapsed;
                }

                e.Handled = true;

                if (!_pinching)
                {
                    _pinching = true;

                    _relativeCenter = new Point(e.PinchManipulation.Original.Center.X / Image.Width, e.PinchManipulation.Original.Center.Y / Image.Height);
                }

                double w, h;

                if (_width < _height)
                {
                    h = _height * _scale * e.PinchManipulation.CumulativeScale;
                    h = Math.Max(Viewport.ActualHeight, h);
                    h = Math.Min(h, _height);

                    w = h * _width / _height;
                }
                else
                {
                    w = _width * _scale * e.PinchManipulation.CumulativeScale;
                    w = Math.Max(Viewport.ActualWidth, w);
                    w = Math.Min(w, _width);

                    h = w * _height / _width;
                }

                Image.Width = w;
                Image.Height = h;

                Viewport.Bounds = new Rect(0, 0, w, h);



                GeneralTransform transform = Image.TransformToVisual(Viewport);
                Point p = transform.Transform(e.PinchManipulation.Original.Center);

                double x = _relativeCenter.X * w - p.X;
                double y = _relativeCenter.Y * h - p.Y;

                if (w < _width && h < _height)
                {
                    System.Diagnostics.Debug.WriteLine("Viewport.ActualWidth={0} .ActualHeight={1} Origin.X={2} .Y={3} Image.Width={4} .Height={5}",
                        Viewport.ActualWidth, Viewport.ActualHeight, x, y, Image.Width, Image.Height);

                    Viewport.SetViewportOrigin(new Point(x, y));


                }
            }
            else if (_pinching)
            {
                e.Handled = true;

                CompletePinching();
            }
        }

        private void Viewport_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
        {
            if (_pinching)
            {
                e.Handled = true;

                CompletePinching();
            }
        }
    }

　　

 

另外還有個獲取指定元素下的全部指定類型子元素的方法：

      public static List<T> GetChildObjects<T>(DependencyObject obj, Type typename) where T : FrameworkElement
        {
            DependencyObject child = null;
            List<T> childList = new List<T>();

            for (int i = 0; i <= VisualTreeHelper.GetChildrenCount(obj) - 1; i++)
            {
                child = VisualTreeHelper.GetChild(obj, i);

                if (child is T && (((T)child).GetType() == typename))
                {
                    childList.Add((T)child);
                }
                childList.AddRange(GetChildObjects<T>(child, typename));
            }
            return childList;
        }

　　

要注意的是：地圖圖片文件的生成資源要改成：Resource  否則無法獲取到圖片！座標信息是從服務器獲取的，在MainPage_Loaded()方法內—— App.MapViewModel.GetSp()方法

 

最後上個演示視頻（手繪地圖上用戶去過的景點的Mark會出現卡通人物頭像 沒去過的則不出現卡通人物頭像）：