自定义View(英雄联盟七星图）之准备工作

工欲善其事，必先利其器！自定义view中有很重要一部分就是关于图形坐标轨迹的计算，所以在进行绘制英雄联盟七星图时，我们先要把我们刀磨好，建立对应的数学模型。对于七星图本次主要贴出两种方法来建立模型计算，今天就来表述最简单直接的一种方法。

一、故事背景

MSI季中赛正在进行中，LPL加油！哈哈，相信喜爱玩LOL的朋友们都下载了LOL掌上英雄联盟盒子，在战绩模块中有一个七星图来显示个人近两个月的数据分析如下：

看着这个View感觉还不错，不如自己也来编码一个七星图；

二、？

在开始编码之前我们首先要设计好我们的绘制流程这样才能找到突破口，其实这个自定view看起来没有太大的难度，有两种方法，一种是最简单直接的建立坐标系和模型；二是动态的建立模型来计算，本篇我们先直接简单的方法，我们只需要绘制对应的正七边形，然后在绘制对应数据点将其连接起来就行了，唯一相对叫麻烦的是我们如何确定每个七边形的坐标点，若没有思路的朋友们可以先思考一下再继续，下面我就来分享一下我的思路。

三、建立模型

首先根据android中View体系的坐标系来建立一个坐标系，比在其中画一个半径为r的圆（圆形为O），在圆内作一个正七边形，其每个定点在圆上的坐标为：A、B、C、D、E、F、G。过O作Y轴的垂线交与圆K，过O作X轴的垂线交与圆A，过O作ED的垂线交与ED于S，过B作OH的垂线交OH于M，连接OB、OE、OB、OC。

四、计算对应坐标和个人数据对应能力上的点坐标

其中我们设：
	设：
		OK = OA = OB = OC = OE = r ；
		AH = Δx = x ；
		PK = Δy = y ;
		∵ 正七边形ABCDEFG为正多边形
		∴ ∠AOB = ∠MOB = 2π / 7
		  ∠OED = ∠OES = 5π / 14
		  ∠NOC = 3π / 7
		∴  几何计算得出各点坐标为：
				A ( r + x , y ) 
			    B [ x + ( 1 + sin∠MOB) * r , y + ( 1 - cos∠MOB ) * r]
			    C [ x + ( 1 + sin∠NOC) * r , y + ( 1 + cos∠NOC ) * r]
			    D [ x + ( 1 - cos∠OES) * r , y + ( 1 + sin∠OES ) * r]
			    E [ x + ( 1 - cos∠OES) * r , y + ( 1 + sin∠OES ) * r]
			    F [ x + ( 1 - sin∠NOC) * r , y + ( 1 + cos∠NOC ) * r]
			    G [ x + ( 1 - sin∠MOB) * r , y + ( 1 - cos∠MOB ) * r]
			    
		现在开始计算对应能力点的坐标：
		设点Q为OB上的一点，O坐标为(x1,y1) ，B坐标为(x2,y2) ，坐标系远点为O1
		根据 
		∵向量O1Q = 向量O1O + 向量OQ
				= 向量O1O + λ * 向量OB
		        = 向量O1O + λ* (向量O1B - 向量O1O)
		        =(1-λ) * 向量O1O + λ * 向量O1B
		∴ Q 的坐标为 [ (1 - λ ) * x1 + λ * x2 , (1 - λ ) * y1 + λ * y2 ]
		

至此我们的七星图前期的核心工作就做完了，当然这是最直接方法，但仅限于此，下一篇我们将讲述另一种动态的计算模型。