“相比较政治”是个啥?【足球篇】

奴隶制时期: 你积分第一,但地主队得到亚军。

GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master

军国主义式法西斯主义: 你积分第一,政党队拿到冠军并且把你们队员全体挖来。

有关大名鼎鼎的百度Echarts我就不多说了
不了解的爱人一贯看官方的例证吧 http://echarts.baidu.com/examples.html

盗贼统治式法西斯主义: 你积分第一,政党队得到亚军然后把你勒令降级。

效果图:

尼日乌兰巴托民主:你积分榜第一,政坛队拿到冠军,然后把你的球队降级,再把您的球员全体送去此外国家联赛。

图片 1

社会主义:
你积分第一,政党队获得亚军,然后把所有队员挖来,要求你们得到今后的冠军。

 

乌托邦式共产主义:你积分第一,不过整个联赛都是平手,你们一起享受亚军。

至于可行性:往日常听人说wpf动画开多了会很卡,而自我也未尝写过含有大量动画的档次,不知道实际如何,这一个地图显著全是动画片,所以我写了个测试动画性能的小程序,生成100个点和线跑动画,发现完全没有怎么问题.

列宁式共产主义:你积分第一,你可以博得名额参预非洲冠军杯,并且必须保证在南美洲亚军杯里拿走冠军否则球队降级,可是联赛亚军仍然政坛队的。

为此wpf做这多少个东西必定是一心没有问题的.附上这些小程序
卡通性能测试 有趣味的恋人能够开点动画
看看windows任务管理器里的cpu和内存的消耗情形

斯大林式共产主义:你积分第一,政党队把冠军夺走,然后否认已经有您这一个积分第一,罪魁祸首和被埋怨对象是积分错误。

 

纯粹民主: 你积分第一,由联赛所有球队投票表决什么人拿走季军。

先说下大约的笔触吧:

代议制民主:你积分第一,由联赛所有球队选出代表来支配何人是亚军。

  1. 一经您从未搞规划的帮您做地图的话,基本得去网上找矢量地图,转后转换成path
  2. 找到省会城市的坐标,那就是移动轨迹的起点和顶峰
  3. 基于起源终点生成运动轨迹的path和跑动的点,在点上做路径动画,生成一个圆,中央放到到达城市的坐标处
  4. 开端化过程的动画

新加坡共和国式民主:你积分第一,足协将对您利用电话威逼裁判举行惩罚。

布局

初期的初期,我们得先考虑布局,为了以防万一一旦做成用户控件的话,设置尺寸时地图走形.

  1. 最外层肯定要用Viewbox,按比例缩放.需要小心的是,Viewbox内部放的控件是必须有切实可行的尺寸的,它才能举行缩放,当然不必然必须要显式的去设置内部的Width和Height,只要其中有实际意义上的尺码就行.
  2. Viewbox内先放一个Grid,分成两列Width全部设置成auto,这样能依照其中控件的其实尺寸来支配列宽.
  3. 0列放一个StackPanel.这些是左手当菜单用的RadioButton的容器,每个RadioButton都有实际的宽度,所以0列就有了现实的宽窄
  4. 1列再放一个Grid,那一个Grid一定要设置HorizontalAlignment=”Left”
    VerticalAlignment=”Top”,就是靠左上角布局,这样她其中的控件就会给它撑起来,也就有了切实的尺寸,这样Viewbox才可以缩放
  5. 把地图的path全部内置这多少个Grid里,path的Stretch必须是None,这样path就会把那些Grid给撑起来,在这个Grid里面所有path的上面再放一个Grid,用来做变更的卡通用的图样的器皿,他的坐标是和父级Grid的坐标重合的

美利坚同盟国式民主:俱乐部主席选举前,候选人许诺给所有匡助者带来5名最佳球星和冠军。选举停止后,上任者将再也定义何人才是极品巨星哪天拿到亚军–仅有少数选举过程中的协理者心目中的一级巨星可以被转正。

地图

至于找地图,不佳找,我从没怎么好的心得.反正目的就是找一个带有省会标记的地图矢量图,只假若矢量图,大家就应当有办法把他转换成Xmal.

自我是在百度文库里找到一个ppt版的矢量地图,0下载券
矢量地图素材 下载下来后用ppt打开,要用微软的,其它可能保留不了源文件,右键地图=>另存为=>选.emf格式,然后用Microsoft
Expression Design打开,然后右键=>导出

图片 2

这样就拿到了我们要的path,然后找到每个省会所对应的path,取他们的Canvas.Left+Width/2
Canvas.Top+Height/2 就是对应坐标点的(x,y).(我算的没这么精致,就是大约加了下.那一个工作太平淡,这不是重点.)

先吐槽下我找的这个地图,新加坡和塞尔维亚贝尔(Bell)格莱德是连在一起的,遵义也破灭不见了,3个城市总体合成了一个path.所以提出大家温馨再去找找

留神wpf的坐标都是以左上角先导的(0,0)
向右加x值 向下加y值 前边我们转移的图片定位时都要 x值-自身Width/2
y值-自身Height/2 这样才能让图形的骨干对准需要固定的坐标点

有了地图和坐标,大家就可以做下边的办事了

大不列颠及苏格兰联合王国式民主:你有一群球员;你雇佣蹩脚江湖里胥为队医,之后她们一切负伤导致力不从心参赛,足协什么也不做。

转变动画所需要的奔走的点,运动轨迹的path,表示到达城市的圆形

西欧式民主:你一支球队;足协一先导设立法律决定你该用什么教练,以及哪些时候去磨炼,然后付钱给你让你踢假球。完事之后,足协将球队解散,让一半球员退役,让另一半球员去低级别联赛混迹。最后,足协将发给你表格,要求填写总结那么些失败赛季原因的素材。

小跑的点

跑步的点,我用了一个Grid里面套了一个path和一个Ellipse.

椭圆做阴影,颜色和轨迹一样,加一个透明掩码OpacityMask,里面是一个放射型的渐变画刷RadialGradientBrush.原点GradientOrigin(0.8,0.5) offset0处设置为不透明,offset1处不透明度设置为2/16.

水滴型的path我就用blend里的钢笔随意画了一个,得到了它的Data. Fill给一个线型渐变画刷,StartPoint(0,0),EndPoint(1,0),offset0给一个半晶莹剔透的轨迹色,offset1给个不透明的纯白.

这多少个Grid的IsHitTestVisible可以设置成false,不参加命中测试,这样鼠标在轨道上时,点通过时,不会卡住轨迹ToolTip的展现.

代码控,想自己写path的话,思路可以参考我的另一篇博客
WPF绘制简单常用的Path

随便贸易式资本主义: 你有一支球队,你卖掉所有球员,拿到一大笔转户费。

城市的圆

他就是个圆形,没什么好说的,注意一下主旨的一定就行了 Ellipse
颜色和轨迹一样 ToolTip写上您想体现的事物

新世界秩序资本主义:
你有一批球员,一个我们球队要在他们身上举办投资,然后把她们送到比尔(Bill)y时科威特城队举行训练竞赛。最后你将买回已过当打之年的老将

移步轨迹

自己用的是弧线ArcSegment
两个城市的点确定了,那么可以透过三个点的x,y,依据勾股定理总计出线段的长度.给一个点,连接这六个都市的点,可以构成一个三角形,三个城市整合的线条对面的分外角能够设置成一个角度参数,

本条线条固定,对角的角度固定,那么他所对应的外接圆的拱形就是一定的.大家得以依照正弦定理a/sinA=2r求出外接圆的半径.就足以画出这个弧线来了.然后可以给这些path的ToolTip附上鼠标移上去想显示的文字.改下ToolTip的体制就行了

  • 理所当然,是大幅加价的,豪门球队将向您索取培育费。

动画

香港(香江)式资本主义:你有一支球队。你用你小叔子银行开的信用评释,把她们当中的两支球队卖给你名下的上市集团。其后,用换债权/股的法子把您的四支球队都换回来,同时享受五支球队的缴税宽减。所有六支球队的肖像权将透过一个巴拿马中介机构转让给一个由股东们秘密在开曼群岛登记的铺面——该企业将把持有七支球队的肖像权销售给你的上市集团。年度报告上提出,公司共拥有八支球队,其余还有享用另一支的股权。然而,因为体育场风水很不佳,解散了其中一支球队。

点沿着轨迹跑的卡通

这一部分卡通,我就背着了,参考周银辉的博客 http://www.cnblogs.com/zhouyinhui/archive/2007/07/31/837893.html

 

都会的圆的动画片

给Ellipse的晶莹掩码OpacityMask加一个放射型的渐变画刷RadialGradientBrush,加四个节点,offset0,offset1都是不透明的,在她们当中加一个一心透明的节点,然后动画控制offset值由0到1或由1到0,效果不同.

先导化过程的卡通片

这有的动画其实就是测算时间,在适合的日子开首合适的动画.

移动轨迹的显示:就是给移动轨迹path的透明掩码给一个线型渐变画刷,按照向左,右,上,下活动,设置好StartPoint和EndPoint,然后两个节点一个透明,一个不透明,同时从0向1做动画,需要小心的是一旦一前一后运动,一定要透明的非凡节点在前方运动,

再不会出现很奇怪的一言一行,把这么些动画的时刻设置成跑动的点的一半的时间.这样轨迹比点跑的快,不至于点跑过去了,路径还不曾表现到这

有关城市的圆,这部分加的相比多,首先可以用一个DoubleAnimation来控制Ellipse的透明度,开端时间是轨道显示的时间,也就是点的时刻/2,这样刚好轨迹突显到圆时,圆开首展现,动画时间也设置成轨迹展现时间,这样刚好点运动到圆的时候,圆已经完全显示完.

然后加一个ColorAnimation,来支配圆透明掩码里放射画刷的第二个节点,也就是控制点,让她改成透明,用时0就可以,那样就足以继续圆的放射型动画了.起先时间就是点运动到圆的时间.

接下去就是有些RadioButton,ToolTip,Path的样式问题了.这有的大家看心理,做个祥和喜欢的体裁就足以了.

 

2016-08-01更新:

将名称注册动画改为目标注册动画

图片 3图片 4

  1         private void AddPointToStoryboard(Grid runPoint, Ellipse toEll, Storyboard sb, Path particlePath, double l, ProvincialCapital from, MapToItem toItem)
  2         {
  3             double pointTime = l / m_Speed;//点运动所需的时间
  4             double particleTime = pointTime / 2;//轨迹呈现所需时间(跑的比点快两倍)
  5             ////生成为控件注册名称的guid
  6             //string name = Guid.NewGuid().ToString().Replace("-", "");
  7 
  8             #region 运动的点
  9             TransformGroup tfg = new TransformGroup();
 10             MatrixTransform mtf = new MatrixTransform();
 11             tfg.Children.Add(mtf);
 12             TranslateTransform ttf = new TranslateTransform(-runPoint.Width / 2, -runPoint.Height / 2);//纠正最上角沿path运动到中心沿path运动
 13             tfg.Children.Add(ttf);
 14             runPoint.RenderTransform = tfg;
 15             //this.RegisterName("m" + name, mtf);
 16 
 17             MatrixAnimationUsingPath maup = new MatrixAnimationUsingPath();
 18             maup.PathGeometry = particlePath.Data.GetFlattenedPathGeometry();
 19             maup.Duration = new Duration(TimeSpan.FromSeconds(pointTime));
 20             maup.RepeatBehavior = RepeatBehavior.Forever;
 21             maup.AutoReverse = false;
 22             maup.IsOffsetCumulative = false;
 23             maup.DoesRotateWithTangent = true;
 24             //Storyboard.SetTargetName(maup, "m" + name);
 25             //Storyboard.SetTargetProperty(maup, new PropertyPath(MatrixTransform.MatrixProperty));
 26             Storyboard.SetTarget(maup, runPoint);
 27             Storyboard.SetTargetProperty(maup, new PropertyPath("(Grid.RenderTransform).Children[0].(MatrixTransform.Matrix)"));
 28             sb.Children.Add(maup);
 29             #endregion
 30 
 31             #region 达到城市的圆
 32             //this.RegisterName("ell" + name, toEll);
 33             //轨迹到达圆时 圆呈现
 34             DoubleAnimation ellda = new DoubleAnimation();
 35             ellda.From = 0.2;//此处值设置0-1会有不同的呈现效果
 36             ellda.To = 1;
 37             ellda.Duration = new Duration(TimeSpan.FromSeconds(particleTime));
 38             ellda.BeginTime = TimeSpan.FromSeconds(particleTime);//推迟动画开始时间 等轨迹连接到圆时 开始播放圆的呈现动画
 39             ellda.FillBehavior = FillBehavior.HoldEnd;
 40             //Storyboard.SetTargetName(ellda, "ell" + name);
 41             //Storyboard.SetTargetProperty(ellda, new PropertyPath(Ellipse.OpacityProperty));
 42             Storyboard.SetTarget(ellda, toEll);
 43             Storyboard.SetTargetProperty(ellda, new PropertyPath(Ellipse.OpacityProperty));
 44             sb.Children.Add(ellda);
 45             //圆呈放射状
 46             RadialGradientBrush rgBrush = new RadialGradientBrush();
 47             GradientStop gStop0 = new GradientStop(Color.FromArgb(255, 0, 0, 0), 0);
 48             //此为控制点 color的a值设为0 off值走0-1 透明部分向外放射 初始设为255是为了初始化效果 开始不呈放射状 等跑动的点运动到城市的圆后 color的a值才设为0开始呈现放射动画
 49             GradientStop gStopT = new GradientStop(Color.FromArgb(255, 0, 0, 0), 0);
 50             GradientStop gStop1 = new GradientStop(Color.FromArgb(255, 0, 0, 0), 1);
 51             rgBrush.GradientStops.Add(gStop0);
 52             rgBrush.GradientStops.Add(gStopT);
 53             rgBrush.GradientStops.Add(gStop1);
 54             toEll.OpacityMask = rgBrush;
 55             //this.RegisterName("e" + name, gStopT);
 56             //跑动的点达到城市的圆时 控制点由不透明变为透明 color的a值设为0 动画时间为0
 57             ColorAnimation ca = new ColorAnimation();
 58             ca.To = Color.FromArgb(0, 0, 0, 0);
 59             ca.Duration = new Duration(TimeSpan.FromSeconds(0));
 60             ca.BeginTime = TimeSpan.FromSeconds(pointTime);
 61             ca.FillBehavior = FillBehavior.HoldEnd;
 62             //Storyboard.SetTargetName(ca, "e" + name);
 63             //Storyboard.SetTargetProperty(ca, new PropertyPath(GradientStop.ColorProperty));
 64             Storyboard.SetTarget(ca, toEll);
 65             Storyboard.SetTargetProperty(ca, new PropertyPath("(Ellipse.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Color)"));
 66             sb.Children.Add(ca);
 67             //点达到城市的圆时 呈现放射状动画 控制点的off值走0-1 透明部分向外放射
 68             DoubleAnimation eda = new DoubleAnimation();
 69             eda.To = 1;
 70             eda.Duration = new Duration(TimeSpan.FromSeconds(2));
 71             eda.RepeatBehavior = RepeatBehavior.Forever;
 72             eda.BeginTime = TimeSpan.FromSeconds(particleTime);
 73             //Storyboard.SetTargetName(eda, "e" + name);
 74             //Storyboard.SetTargetProperty(eda, new PropertyPath(GradientStop.OffsetProperty));
 75             Storyboard.SetTarget(eda, toEll);
 76             Storyboard.SetTargetProperty(eda, new PropertyPath("(Ellipse.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"));
 77             sb.Children.Add(eda);
 78             #endregion
 79 
 80             #region 运动轨迹
 81             //找到渐变的起点和终点
 82             Point startPoint = GetProvincialCapitalPoint(from);
 83             Point endPoint = GetProvincialCapitalPoint(toItem.To);
 84             Point start = new Point(0, 0);
 85             Point end = new Point(1, 1);
 86             if (startPoint.X > endPoint.X)
 87             {
 88                 start.X = 1;
 89                 end.X = 0;
 90             }
 91             if (startPoint.Y > endPoint.Y)
 92             {
 93                 start.Y = 1;
 94                 end.Y = 0;
 95             }
 96             LinearGradientBrush lgBrush = new LinearGradientBrush();
 97             lgBrush.StartPoint = start;
 98             lgBrush.EndPoint = end;
 99             GradientStop lgStop0 = new GradientStop(Color.FromArgb(255, 0, 0, 0), 0);
100             GradientStop lgStop1 = new GradientStop(Color.FromArgb(0, 0, 0, 0), 0);
101             lgBrush.GradientStops.Add(lgStop0);
102             lgBrush.GradientStops.Add(lgStop1);
103             particlePath.OpacityMask = lgBrush;
104             //this.RegisterName("p0" + name, lgStop0);
105             //this.RegisterName("p1" + name, lgStop1);
106             //运动轨迹呈现
107             DoubleAnimation pda0 = new DoubleAnimation();
108             pda0.To = 1;
109             pda0.Duration = new Duration(TimeSpan.FromSeconds(particleTime));
110             pda0.FillBehavior = FillBehavior.HoldEnd;
111             //Storyboard.SetTargetName(pda0, "p0" + name);
112             //Storyboard.SetTargetProperty(pda0, new PropertyPath(GradientStop.OffsetProperty));
113             Storyboard.SetTarget(pda0, particlePath);
114             Storyboard.SetTargetProperty(pda0, new PropertyPath("(Path.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"));
115             sb.Children.Add(pda0);
116             DoubleAnimation pda1 = new DoubleAnimation();
117             //pda1.From = 0.5; //此处解开注释 值设为0-1 会有不同的轨迹呈现效果
118             pda1.To = 1;
119             pda1.Duration = new Duration(TimeSpan.FromSeconds(particleTime));
120             pda1.FillBehavior = FillBehavior.HoldEnd;
121             //Storyboard.SetTargetName(pda1, "p1" + name);
122             //Storyboard.SetTargetProperty(pda1, new PropertyPath(GradientStop.OffsetProperty));
123             Storyboard.SetTarget(pda1, particlePath);
124             Storyboard.SetTargetProperty(pda1, new PropertyPath("(Path.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"));
125             sb.Children.Add(pda1);
126             #endregion
127         }

View Code

2016-12-19更新:

发布到GitHub,地址:https://github.com/ptddqr/wpf-echarts-map/tree/master

 

源码下载:仿百度Echarts人口迁移图.zip