WPF簡易北京地鐵效果圖


這個是百度地圖上北京地鐵的地址http://map.baidu.com/?subwayShareId=beijing,131,我們先看下百度上面的效果圖

我要實現的內容比較簡單,就是繪制這些圖,和在地鐵線上滑動時,會有跟着走的地鐵名的提示。

以下是我實現的,簡陋的效果圖

實現過程:

一、扒數據

我不會爬蟲,所以,這里是用Fiddler把數據給扒下來,由於北京地鐵官網,最近在維護中,所以進不去,不知道他們是不是提供了相關的數據,如果數據豐富的話,可做的東西還是很多的。

F12打開開發者工具,用鼠標工具,選擇地鐵圖,會定位到相應的代碼部分

數據就在SVG的結點下面,我們把數據復制粘貼出來,這些數據上,我們能發現,是分離開的,舉個例子:1號線上有很多個站點,例如蘋果園、古城等,但是在數據上,你看不出1號線和蘋果園、古城的關系所在,也就是說,展示給我們的數據是相對獨立的。數據上,提供了Path的路徑,Textblock和Ellipse的坐標信息。那我們就用這些信息,簡單的畫一下北京地鐵圖。

二、讀取XML文件

將扒下來的數據,放到XML中,稍微修改下,因為會報錯,命名空間的問題,很好弄,就不貼了,觀察數據,以后,建立一個實體DrawInfo,包含幾個字段

public class DrawInfo
    {
        private string type;//類型 : path text ellipse image 
        private string pathData;//path的路徑數據
        private string forColor;//顏色
        private double x;//坐標
        private double y;//坐標
        private string tooltip;//ToolTip
        private string id;//ID       
        private string fontWeight;

        public string Type
        {
            get
            {
                return type;
            }

            set
            {
                type = value;
            }
        }

        public string PathData
        {
            get
            {
                return pathData;
            }

            set
            {
                pathData = value;
            }
        }

        public string ForColor
        {
            get
            {
                return forColor;
            }

            set
            {
                forColor = value;
            }
        }

        public double X
        {
            get
            {
                return x;
            }

            set
            {
                x = value;
            }
        }

        public double Y
        {
            get
            {
                return y;
            }

            set
            {
                y = value;
            }
        }

        public string Tooltip
        {
            get
            {
                return tooltip;
            }

            set
            {
                tooltip = value;
            }
        }

        public string Id
        {
            get
            {
                return id;
            }

            set
            {
                id = value;
            }
        }

        public string FontWeight
        {
            get
            {
                return fontWeight;
            }

            set
            {
                fontWeight = value;
            }
        }
    }
DrawInfo

下面是讀取的方法

private void ReadXML()
        {
            doc.Load(xmlPath);
            XmlNodeList xmlNodeList = doc.DocumentElement.GetElementsByTagName("g");
            foreach (XmlNode xn in xmlNodeList)
            {
                foreach (XmlNode item in xn.ChildNodes)
                {
                    DrawInfo drawInfo = null;
                    if (item.Name == "path")
                    {
                        drawInfo = new DrawInfo()
                        {
                            Type = "path",
                            PathData = item.Attributes["d"].InnerText,
                            ForColor = item.Attributes["stroke"].InnerText,
                            Tooltip = item.Attributes["lb"].InnerText,
                        };
                    }
                    if (item.Name == "text")
                    {
                        drawInfo = new DrawInfo()
                        {
                            Type = "text",
                            ForColor = item.Attributes["fill"].InnerText,
                            X = double.Parse(item.Attributes["x"].InnerText),
                            Y = double.Parse(item.Attributes["y"].InnerText),
                            Tooltip = item.InnerText,
                            FontWeight = item.Attributes["font-weight"].InnerText
                        };
                    }
                    if (item.Name == "ellipse")
                    {
                        drawInfo = new DrawInfo()
                        {
                            Type = "ellipse",
                            ForColor = item.Attributes["stroke"].InnerText,
                            X = double.Parse(item.Attributes["cx"].InnerText) - 6.5,
                            Y = double.Parse(item.Attributes["cy"].InnerText) - 6.5,
                            Tooltip=item.Attributes["name"].InnerText,
                        };
                    }
                    if (item.Name == "image")
                    {
                        drawInfo = new DrawInfo()
                        {
                            Type = "image",
                            X = double.Parse(item.Attributes["x"].InnerText),
                            Y = double.Parse(item.Attributes["y"].InnerText),
                            Id = item.Attributes["id"].InnerText,
                            Tooltip=item.Attributes["name"].InnerText
                        };
                    }
                    if (drawInfo != null)
                        DrInList.Add(drawInfo);
                }
            }
        }
ReadXML

由於是一個小Demo,所以代碼上寫的不是很規范,例如DrawInfo里面的字段,好多,我在后期都公用了,而且定義的類型也不是很規范,用了string,而沒使用Brush、FontWeight等,在取XML結點的Name的時候,也應該定義一個枚舉類型,我都沒有去弄,就是為了寫小例子的時候,省事一點,但是在實際的生產代碼中,建議大家是規范的,利人利己。三、繪制效果圖

數據從XML中拿到以后,繪制效果圖,就方便多了,代碼就很容搞定

private void ShowSubWay()
        {
            foreach (DrawInfo item in DrInList)
            {
                if (item.Type == "path")
                {
                    Style style = win.FindResource("pathStyle") as Style;
                    Path path = new Path()
                    {
                        Style = style,
                        Data = Geometry.Parse(item.PathData),
                        Stroke = (Brush)brushConverter.ConvertFromString(item.ForColor),
                        ToolTip = item.Tooltip
                    };
                    path.MouseMove += Path_MouseMove;
                    path.MouseLeave += Path_MouseLeave;
                    grid.Children.Add(path);
                }
                if (item.Type == "text")
                {
                    Style style = win.FindResource("textblockStyle") as Style;
                    TextBlock textBlock = new TextBlock()
                    {
                        Style = style,
                        Foreground = (Brush)brushConverter.ConvertFromString(item.ForColor),
                        Margin = new Thickness() { Left = item.X, Top = item.Y },
                        Text = item.Tooltip,
                        FontWeight = (FontWeight)new FontWeightConverter().ConvertFromString(item.FontWeight),
                    };
                    grid.Children.Add(textBlock);
                }
                if (item.Type == "ellipse")
                {
                    Style style = win.FindResource("ellipseStyle") as Style;
                    Ellipse ellipse = new Ellipse()
                    {
                        Style = style,
                        Stroke = (Brush)brushConverter.ConvertFromString(item.ForColor),
                        Margin = new Thickness() { Left = item.X, Top = item.Y },
                        ToolTip=item.Tooltip
                    };
                    ellipse.MouseMove += Ellipse_MouseMove;
                    ellipse.MouseLeave += Ellipse_MouseLeave;
                    grid.Children.Add(ellipse);
                }
                if (item.Type == "image")
                {
                    Style style = null;
                    if (item.Id == "svgjsImage12298" || item.Id == "svgjsImage12302")
                        style = win.FindResource("imgAir") as Style;
                    else
                        style = win.FindResource("imgTran") as Style;
                    Image img = new Image()
                    {
                        Style = style,
                        Margin = new Thickness() { Left = item.X, Top = item.Y },
                        ToolTip=item.Tooltip
                    };
                    img.MouseMove += Img_MouseMove;
                    img.MouseLeave += Img_MouseLeave;
                    grid.Children.Add(img);
                }
            }
        }
ShowSubWay

代碼很Low,羽神說,我把WPF寫成了Winform,不得不承認,是這個樣子的,binding什么的,都沒用,但是后來想了想不是我不想用,而是地鐵圖的路線不規則,沒有規律,我就不知道怎么重寫一個控件來綁定一個List集合,統一進行展示了,思考了挺久,但是依然沒有好的想法,因為,我們在公司做的binding,都是基於數據層面的,說白了,就是前台的XAML變動不大,或者變動的比較有規律,例如重寫Listbox的Template,來實現統一的效果,綁定數據以后,自動展示。

就像上面這個圖,就可以重寫Listbox,然后實現效果,但是我這次的小Demo里沒有做,因為XML的數據中沒有提供相關的東西,也就沒有去搞了,相信,做過WPF的,看了這個圖,基本也就知道怎么搞了,如果有沒有思路的朋友,可以留言問我。

四、類似於ToolTip的地鐵名提示

這個功能特別的感謝李偉哥@普通的地球人,不得不說,李偉哥的WPF特別厲害,輕松的搞定了我當時出現的困擾。最開始做跟着鼠標走的ToolTip的時候,首先想到的是ToolTip,但是發現,不好用,因為他會定位到一個位置,不會跟着走,后來也用了Popup,但是根據網上的方法,會閃爍,因為Popup是需要先隱藏,再顯示的,所以,有閃爍的效果,在群里問了以后,李偉哥很快給了一個Demo,解答了我,厲害,在此謝謝李偉哥。 

<Popup Grid.Row="1" x:Name="popPath" AllowsTransparency="True">
  <Border BorderBrush="Transparent" BorderThickness="0" Background="Transparent">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
      <Path Stroke="Black" StrokeThickness="1" Fill="White" Data="M 0,0 L 120,0 L 120,30 L 65,30 L 60,35 L 55,30 L 0,30 Z" />
      <Grid x:Name="grpopPath" Margin="5,5,5,10">
        <TextBlock x:Name="tbPath" Foreground="White" FontSize="13" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{Binding Null}" />
      </Grid>
    </Grid>
  </Border>
</Popup>
private void Path_MouseMove(object sender, MouseEventArgs e)
{
    Path path = (Path)sender;
    grpopPath.Background = path.Stroke;
    tbPath.Text = path.ToolTip.ToString();


    Point p = e.GetPosition(mainGrid);
    popPath.IsOpen = true;
    popPath.HorizontalOffset = p.X - 60;
    popPath.VerticalOffset = p.Y - mainGrid.ActualHeight - 40;
}

private void Path_MouseLeave(object sender, MouseEventArgs e)
{
    popPath.IsOpen = false;
}

效果如圖

五、擴展

1、Grid

這個控件,我一直使用,也習慣了用Grid,但是在做的過程中,確確實實學習到了不少東西,在此感謝羽神(不知道羽神的博客園地址),問題是這樣的,就是繪制Path和Textblock的時候,都沒有問題,但是繪制Ellipse的時候,卻出現問題了,定位的位置不對,嚴重便宜到右下方,但是也設置了Grid的HorizontalAlignment="Left" VerticalAlignment="Top",但是都不起作用。

 羽神一語道破,是因為Grid的內部控件,都是默認全部填充的,需要設置控件自身的HorizontalAlignment和VerticalAlignment,當時設置完以后,就搞定了這個問題,感謝羽神的幫助。

2、Canvas

群里有人問,為什么不用Canvas而用Grid,我當時確實沒有考慮過用Canvas,說白了,我不太習慣除非必要,我個人喜歡用Grid,所以,當時給出的回答是“沒想那么多”,但是當做完以后,后來想想,改成Canvas試下效果,但是發現了原因,此處,還真不能用Canvas,需要用Grid,因為我的外層用了Viewbox,因為百度地圖上趴下了的數據,Path的路徑和定位都特別的大,都是2000多,3000多大的樣子,用了Canvas,沒法顯示下。可能大家不太好理解,我舉個例子:外層用Viewbox,窗體的大小是300*300的,Viewbox下我們測試Canvas和Grid,Canvas和Grid下,放置一個3000*3000的Button。

上面是Canvas的例子代碼和效果,明細可以看到,展示不出來Button,就是最大化也不行,我的電腦屏幕比較小。

上面是Grid的例子,能夠看出,Button是可以顯示出來的,填充了整個Viewbox,這和地鐵圖的原理是一樣的。

有人可能會問,Canvas如果不給寬和高呢,如果Canvas不給寬和高,則會在左側頂點上,你可以試驗下,就知道了。

 六、總結

這個例子用到的知識點:XML的讀取,控件的拖拽縮放,內容不多,但是,與我個人而言,每次做個小Demo都有所收獲和成長,因為公司不忙,所以不想手生了,只能沒事做個小Demo,補充自己的不足,提高自己,就像做的時候,遇到的兩個問題,李偉哥和羽神給了很好的回答,我都學習到了,謝謝。

DEMO

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM