本文經(jīng)原作者授權(quán)以原創(chuàng)方式二次分享，歡迎轉(zhuǎn)載、分享。

原文作者：眾尋

原文地址： https://www.cnblogs.com/ZXdeveloper/p/8600785.html

前言

這個(gè)是百度地圖上北京地鐵的地址，我們先看下百度上面的效果圖；

• 我要實(shí)現(xiàn)的內(nèi)容比較簡(jiǎn)單，就是繪制這些圖，和在地鐵線上滑動(dòng)時(shí)，會(huì)有跟著走的地鐵名的提示。

• 以下是我實(shí)現(xiàn)的，簡(jiǎn)陋的效果；

一、準(zhǔn)備數(shù)據(jù)

• 我不會(huì)爬蟲，所以，這里是用Fiddler把數(shù)據(jù)給扒下來，由于北京地鐵官網(wǎng)，最近在維護(hù)中，所以進(jìn)不去，不知道他們是不是提供了相關(guān)的數(shù)據(jù)，如果數(shù)據(jù)豐富的話，可做的東西還是很多的。

• F12打開開發(fā)者工具，用鼠標(biāo)工具，選擇地鐵圖，會(huì)定位到相應(yīng)的代碼部分;

• 數(shù)據(jù)就在SVG的結(jié)點(diǎn)下面，我們把數(shù)據(jù)復(fù)制粘貼出來，這些數(shù)據(jù)上，我們能發(fā)現(xiàn)，是分離開的，舉個(gè)例子：1號(hào)線上有很多個(gè)站點(diǎn)，例如蘋果園、古城等，但是在數(shù)據(jù)上，你看不出1號(hào)線和蘋果園、古城的關(guān)系所在，也就是說，展示給我們的數(shù)據(jù)是相對(duì)獨(dú)立的。數(shù)據(jù)上，提供了Path的路徑，Textblock和Ellipse的坐標(biāo)信息。那我們就用這些信息，簡(jiǎn)單的畫一下北京地鐵圖。

二、讀取XML文件

• 將扒下來的數(shù)據(jù)，放到XML中，稍微修改下，因?yàn)闀?huì)報(bào)錯(cuò)，命名空間的問題，很好弄，就不貼了，觀察數(shù)據(jù)，以后，建立一個(gè)實(shí)體DrawInfo包含幾個(gè)字段;

public?class?DrawInfo{private?string?type;//類型?：?path?text?ellipse?image?private?string?pathData;//path的路徑數(shù)據(jù)private?string?forColor;//顏色private?double?x;//坐標(biāo)private?double?y;//坐標(biāo)private?string?tooltip;//ToolTipprivate?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

• 由于是一個(gè)小Demo，所以代碼上寫的不是很規(guī)范，例如DrawInfo里面的字段，好多，我在后期都公用了，而且定義的類型也不是很規(guī)范，用了string而沒使用Brush、FontWeight等，在取XML結(jié)點(diǎn)的Name的時(shí)候，也應(yīng)該定義一個(gè)枚舉類型，我都沒有去弄，就是為了寫小例子的時(shí)候，省事一點(diǎn)，但是在實(shí)際的生產(chǎn)代碼中，建議大家是規(guī)范的，利人利己。

三、繪制效果圖

• 數(shù)據(jù)從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;elsestyle?=?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);}}}

• 代碼很Low，羽神說，我把WPF寫成了Winform，不得不承認(rèn)，是這個(gè)樣子的，binding什么的，都沒用，但是后來想了想不是我不想用，而是地鐵圖的路線不規(guī)則，沒有規(guī)律，我就不知道怎么重寫一個(gè)控件來綁定一個(gè)List集合，統(tǒng)一進(jìn)行展示了，思考了挺久，但是依然沒有好的想法，因?yàn)?#xff0c;我們?cè)诠咀龅腷inding，都是基于數(shù)據(jù)層面的，說白了，就是前臺(tái)的XAML變動(dòng)不大，或者變動(dòng)的比較有規(guī)律，例如重寫Listbox的Template，來實(shí)現(xiàn)統(tǒng)一的效果，綁定數(shù)據(jù)以后，自動(dòng)展示。

• 就像上面這個(gè)圖，就可以重寫Listbox，然后實(shí)現(xiàn)效果，但是我這次的小Demo里沒有做，因?yàn)閄ML的數(shù)據(jù)中沒有提供相關(guān)的東西，也就沒有去搞了，相信，做過WPF的，看了這個(gè)圖，基本也就知道怎么搞了，如果有沒有思路的朋友，可以留言問我。

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

• 這個(gè)功能特別的感謝李偉哥@普通的地球人，不得不說，李偉哥的WPF特別厲害，輕松的搞定了我當(dāng)時(shí)出現(xiàn)的困擾。最開始做跟著鼠標(biāo)走的ToolTip的時(shí)候，首先想到的是ToolTip，但是發(fā)現(xiàn)，不好用，因?yàn)樗麜?huì)定位到一個(gè)位置，不會(huì)跟著走，后來也用了Popup，但是根據(jù)網(wǎng)上的方法，會(huì)閃爍，因?yàn)镻opup是需要先隱藏，再顯示的，所以，有閃爍的效果，在群里問了以后，李偉哥很快給了一個(gè)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; }

• 效果如圖

五、擴(kuò)展

1）Grid

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

• 羽神一語道破，是因?yàn)镚rid的內(nèi)部控件，都是默認(rèn)全部填充的，需要設(shè)置控件自身的HorizontalAlignment和VerticalAlignment，當(dāng)時(shí)設(shè)置完以后，就搞定了這個(gè)問題，感謝羽神的幫助。

2）Canvas

• 群里有人問，為什么不用Canvas而用Grid，我當(dāng)時(shí)確實(shí)沒有考慮過用Canvas，說白了，我不太習(xí)慣除非必要，我個(gè)人喜歡用Grid，所以，當(dāng)時(shí)給出的回答是“沒想那么多”，但是當(dāng)做完以后，后來想想，改成Canvas試下效果，但是發(fā)現(xiàn)了原因，此處，還真不能用Canvas，需要用Grid，因?yàn)槲业耐鈱佑昧薞iewbox，因?yàn)榘俣鹊貓D上趴下了的數(shù)據(jù)，Path的路徑和定位都特別的大，都是2000多，3000多大的樣子，用了Canvas，沒法顯示下。可能大家不太好理解，我舉個(gè)例子：外層用Viewbox，窗體的大小是300*300的，Viewbox下我們測(cè)試Canvas和Grid，Canvas和Grid下，放置一個(gè)3000*3000的Button。

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

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

• 有人可能會(huì)問，Canvas如果不給寬和高呢，如果Canvas不給寬和高，則會(huì)在左側(cè)頂點(diǎn)上，你可以試驗(yàn)下，就知道了。

六、總結(jié)

• 這個(gè)例子用到的知識(shí)點(diǎn)：XML的讀取，控件的拖拽縮放，內(nèi)容不多，但是，與我個(gè)人而言，每次做個(gè)小Demo都有所收獲和成長(zhǎng)，因?yàn)楣静幻?#xff0c;所以不想手生了，只能沒事做個(gè)小Demo，補(bǔ)充自己的不足，提高自己，就像做的時(shí)候，遇到的兩個(gè)問題，李偉哥和羽神給了很好的回答，我都學(xué)習(xí)到了，謝謝。源碼

總結(jié)

以上是生活随笔為你收集整理的WPF 实现简易北京地铁效果图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。