WPF 实现简易北京地铁效果图

本文经原作者授权以原创方式二次分享，欢迎转载、分享。

原文作者：眾尋

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

前言

这个是百度地图上北京地铁的地址，我们先看下百度上面的效果图；

20ce63a6987db931e218959e62a526ad.gif

  • 我要实现的内容比较简单，就是绘制这些图，和在地铁线上滑动时，会有跟着走的地铁名的提示。

  • 以下是我实现的，简陋的效果；

一、准备数据

  • 我不会爬虫，所以，这里是用Fiddler把数据给扒下来，由于北京地铁官网，最近在维护中，所以进不去，不知道他们是不是提供了相关的数据，如果数据丰富的话，可做的东西还是很多的。

  • F12打开开发者工具，用鼠标工具，选择地铁图，会定位到相应的代码部分;

7b86dea0b325a0cfedf237ba0aaaf76e.png

  • 数据就在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;//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

  • 由于是一个小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;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，不得不承认，是这个样子的，binding什么的，都没用，但是后来想了想不是我不想用，而是地铁图的路线不规则，没有规律，我就不知道怎么重写一个控件来绑定一个List集合，统一进行展示了，思考了挺久，但是依然没有好的想法，因为，我们在公司做的binding，都是基于数据层面的，说白了，就是前台的XAML变动不大，或者变动的比较有规律，例如重写Listbox的Template，来实现统一的效果，绑定数据以后，自动展示。

9303470f7e39b3d8df0396f8bac289b5.png

  • 就像上面这个图，就可以重写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;
}

  • 效果如图25905ddf4b5740a8e60e173f0534023e.png

五、扩展

1）Grid

  • 这个控件，我一直使用，也习惯了用Grid，但是在做的过程中，确确实实学习到了不少东西，在此感谢羽神（不知道羽神的博客园地址），问题是这样的，就是绘制Path和Textblock的时候，都没有问题，但是绘制Ellipse的时候，却出现问题了，定位的位置不对，严重便宜到右下方，但是也设置了Grid的HorizontalAlignment="Left" VerticalAlignment="Top"，但是都不起作用。

7670d0ace0efc04962f3d1326ef0d3c2.png

  • 羽神一语道破，是因为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。

c2bc0c21133997030fabdf6402fe429d.png8bb74b63b41b1a2cda7c2b34a6d62d59.png

  • 上面是Canvas的例子代码和效果，明细可以看到，展示不出来Button，就是最大化也不行，我的电脑屏幕比较小。

a16722da79ad7a1c11338fe9c26786b9.png23d07fcbc3cff1e003087e9ec6cbfbb7.png

  • 上面是Grid的例子，能够看出，Button是可以显示出来的，填充了整个Viewbox，这和地铁图的原理是一样的。

  • 有人可能会问，Canvas如果不给宽和高呢，如果Canvas不给宽和高，则会在左侧顶点上，你可以试验下，就知道了。

六、总结

  • 这个例子用到的知识点：XML的读取，控件的拖拽缩放，内容不多，但是，与我个人而言，每次做个小Demo都有所收获和成长，因为公司不忙，所以不想手生了，只能没事做个小Demo，补充自己的不足，提高自己，就像做的时候，遇到的两个问题，李伟哥和羽神给了很好的回答，我都学习到了，谢谢。源码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/286066.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C#学习笔记-Windows窗体自定义初始位置

C#学习笔记-Windows窗体自定义初始位置

根据屏幕大小定义初始位置&#xff1a; &#xff08;这个不是难&#xff0c;但是最近常常忘记&#xff0c;记着方便查看。&#xff09; 1 //获取当前屏幕的长和宽2 int ScreenX Screen.PrimaryScreen.Bounds.Width;3 int ScreenY Screen…
阅读更多...
【MATLAB统计分析与应用100例】案例014：matlab读取Excel数据，调用stepwise函数作交互式逐步回归分析

【MATLAB统计分析与应用100例】案例014：matlab读取Excel数据，调用stepwise函数作交互式逐步回归分析

文章目录 1. 交互式逐步回归分析结果预览2. 完整matlab代码1. 交互式逐步回归分析结果预览 2. 完整matlab代码 % 从Excel文件examp08_03.xls中读取数值型数据 xydata = xlsread(examp08_03.xls); y = xydata<
阅读更多...
MsSql 自定义分数段，按分数段统计考试人次

MsSql 自定义分数段，按分数段统计考试人次

--分数段分布 DECLARE levels VARCHAR(100) 10,20,30,40,50,60,70,80,90,100; --自定义分数段 DECLARE paperId VARCHAR(100)0000000000001019--试卷编号 WITH tbTemp AS (--处理分数段SELECT L.levelFROM (SELECT [value] CONVERT(XML, <v> REPLACE(levels, ,, &l…
阅读更多...
opencv---颜色空间转化并实现物体跟踪

opencv---颜色空间转化并实现物体跟踪

一、图像处理的基本操作 因为这是第一篇写opencv的笔记&#xff0c;故先讲讲在python下写opencv的基本操作。总共总结了三点如下&#xff1a; 开头一定要加编码声明:-*- coding: utf-8 -*-python下记得引入opencv模块:import cv2要知道如何读取并展示图片,代码如下:# -*- codin…
阅读更多...
签到功能完成03《ivx低代码签到系统制作》

签到功能完成03《ivx低代码签到系统制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、签到页制作 上一节完成了签到内容的发布&#xff0c;那我们接下来如何制作一个签到页面并且签到呢&#xff1f; 此时我们先创建一个页面叫做签到二维码页面&#xff1a; 随后直接预览这个页面&am…
阅读更多...
System.CommandLine参数Argument

System.CommandLine参数Argument

前两篇说到Command和Option&#xff0c;这篇说说Argument。Argument的用法和Option很像&#xff0c;只是他的构造和属性有些差别&#xff0c;再就是在运行输入时有区别&#xff0c;接下来看看实现。一个参数//创建根命令 var rootCommand new RootCommand("这是一个命令行…
阅读更多...
Kotlin和Java混合开发总结（基于Kotlin1.3.0版本）

Kotlin和Java混合开发总结（基于Kotlin1.3.0版本）

我本来是不想学习kotlin的&#xff0c;但是现在的形势&#xff0c;很多公司都在使用kotlin开发&#xff0c;可以说学会kotlin也是无奈之举&#xff0c;既然是潮流&#xff0c;谷歌也在大力推广&#xff0c;所以还是只能硬着头皮逼迫自己学一下&#xff0c;也能更快适应公司的需…
阅读更多...
【MATLAB统计分析与应用100例】案例015：matlab读取Excel数据，进行值聚类分析

【MATLAB统计分析与应用100例】案例015：matlab读取Excel数据，进行值聚类分析

1. 聚类分析轮廓图 2. matlab完整代码 %*****计算例9.1的距离矩阵 x = [1, 2, 6, 8, 11];
阅读更多...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本节案例如下&#xff08;其他动效篇幅原因逐步讲解&#xff0c;欢迎三…
阅读更多...
Liferay 用本地私服(nexus) 打包部署Portlet应用

Liferay 用本地私服(nexus) 打包部署Portlet应用

当我们使用搭建一个nexus本地仓库&#xff0c;并且配置settings.xml来让应用启用这个仓库。我们使用Liferay 6.1.10的archetype来创建liferay portlet, 如下图&#xff1a; 当我们运行命令mvn package liferay:deploy时&#xff0c;会出现以下错误&#xff1a; [DEBUG] Using c…
阅读更多...
【MATLAB统计分析与应用100例】案例016：matlab读取Excel数据，进行样品系统聚类分析

【MATLAB统计分析与应用100例】案例016：matlab读取Excel数据，进行样品系统聚类分析

1. 聚类分析结果 2. matlab完整代码 （1）读取数据，并进行标准化 [X,textdata] = xlsread(examp09_02.xls); % 从Excel文件中读取数据 X = zscore(X
阅读更多...
解决React Native报错：Error:Found unexpected optical bounds (red pixel)

解决React Native报错：Error:Found unexpected optical bounds (red pixel)

问题背景 同样是在升级 gradle plugin V2.2.3 --> gradle plugin V3.0.1后&#xff0c;运行至打包APK期间报错&#xff1a; Error:found unexpected optical bounds (red pixel) on top border at x14.&#xff08;错误&#xff1a;在X14的上边框上发现意外的光学边界&am…
阅读更多...
webpack 入门

webpack 入门

什么是WebPack&#xff0c;为什么要使用它&#xff1f; 为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用&#xff0c;它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度&#xff0c;前端社区涌现出了很多好的实践方法 模块化&#xff0c;让我…
阅读更多...
使用vsftp虚拟用户实现安全访问控制

使用vsftp虚拟用户实现安全访问控制

一、ftp连接方式 1、命令连接 ftp在与用户交互时&#xff0c;首先打开的是TCP的21号端口&#xff0c;建立命令连接&#xff0c;这个连接会始终存在&#xff0c;直到用户输入bye的那一刻&#xff0c;才断开命令连接。 2、数据连接 1&#xff09;主动连接 主动连接是基于TCP21号端…
阅读更多...
【前端就业课 第二阶段】CSS 零基础到实战（04）定位

【前端就业课 第二阶段】CSS 零基础到实战（04）定位

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 一、定位 定位分为相对定位以及绝对定位。 相对定位可以理解为在 HTM…
阅读更多...
Android TextView设置ClickableSpan 点击结尾空白位置也响应点击的问题

Android TextView设置ClickableSpan 点击结尾空白位置也响应点击的问题

解决办法&#xff0c;在后边紧接着追加一个0宽度字符&#xff1a; builder.append("\u200b"); 相关知识&#xff1a; “\u200b” 为 Unicode Character ‘ZERO WIDTH SPACE’ (U200B)&#xff0c;可用于内容标识&#xff0c;不占位数&#xff08;宽度0&#xff0…
阅读更多...
【MATLAB统计分析与应用100例】案例017：matlab读取Excel数据，进行变量系统聚类分析

【MATLAB统计分析与应用100例】案例017：matlab读取Excel数据，进行变量系统聚类分析

1. 变量系统聚类分析结果 2. matlab完整代码 （1）读取数据，并转为距离向量 [X,textdata] = xlsread(examp09_03.xls); % 从Excel文件中读取数据 y = 1 -
阅读更多...
Wordpress：将图片、post等的URL转换为相对路径

Wordpress：将图片、post等的URL转换为相对路径

2019独角兽企业重金招聘Python工程师标准>>> 例如上传一张图片&#xff0c;其地址是可能 http://127.0.0.1/wp-content/uploads/2015/12/1_.png&#xff0c; 问题是如果我们通过其他的电脑通过wordpress主机的公网IP访问这张图片时会提示找不到。 最好的处理方法是不…
阅读更多...
【MATLAB统计分析与应用100例】案例018：matlab读取Excel数据，进行K均值聚类分析

【MATLAB统计分析与应用100例】案例018：matlab读取Excel数据，进行K均值聚类分析

文章目录 1. K均值聚类分析结果2. matlab完整代码（1）读取数据，并进行标准化变换（2）选取初始凝聚点，进行聚类（3）绘制轮廓图1. K均值聚类分析结果 2. matlab完整代码 （1）读取数据，并进行标准化变换 [X, textdata] = xlsread(examp09_04.xls
阅读更多...
CSS 零基础到实战（05）布局、盒子模型、弹性盒子【前端就业课 第二阶段】

CSS 零基础到实战（05）布局、盒子模型、弹性盒子【前端就业课 第二阶段】

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 一、流动布局 流动布局有3种布局模型&#xff0c;分别是流动布局&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023