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

  • Post author:
  • Post category:其他


上一篇文章记录了一些最简单直接的方法来建立模型,本篇就来讲一下如何动态建立此模型,以后无论几边形我们都可以以此来解决,废话不多说直接开打!



一、单位圆上的点的坐标

  1. 建立直角坐标系;
  2. 以坐标系原点为圆心,作单位圆,r;
  3. 在第一象限取点A;

    在这里插入图片描述

    由此可以得出A的坐标为: ( r

    cosθ , r

    sinθ )



二、平移变换

哈哈,搞定好像是初中或高中的某个知识点

  1. 在上面的基础上将圆沿着X轴方向移动Δx+r的距离;
  2. 将圆沿着Y轴的方向移动Δy+r的距离,得到如下图:
  3. 其中绿色的直角坐标系为原来的坐标系;

在这里插入图片描述

由此可以得出A的坐标为: ( r • cosθ + r + Δx , r • sinθ + r + Δy )



三、绘制内接正七边形

终于到了激动人心的时刻了,绘制圆的内接正七边形

在这里插入图片描述

  1. 由于android view坐标的Y轴正方向是朝下的,所以我们在此讲正七边形倒置绘制,这样我们才能和android 坐标系对应起来;
  2. 一般情况下我们在绘制多形图时,都是取一个点作为定点,如图中的C,以平行Y轴且过C点的直线作为多形图的轴线对称绘制,如图所示;
  3. 有多边形的特性可得出: β = 2π / 7 , α = β – π/2 = – π/2 + β
  4. 由于我们取C点特殊,所以得出:C (r + Δx , Δy)即 : [ r + Δx + r • cos( – π / 2 ),r +Δy + r • sin( – π / 2 ) ]
  5. B点相当于点C绕点O逆时针旋转 β 角 ,也就是 α = – π/2 + β

    即 :B [ r + Δx + r • cos( – π/2 + β ) , r + Δy + r • sin( – π/2 + β ) ]

    即 :B [ r + Δx + r • cos( – π/2 + 1 • β ) , r + Δy + r • sin( – π/2 + 1 • β ) ]
  6. 所以正七边形的七个坐标分别为(从C点开始):

    角 1 : [ r + Δx + r • cos( – π/2 + 0 • β ) , r + Δy + r • sin( – π/2 + 0 • β ) ]

    角 2 : [ r + Δx + r • cos( – π/2 + 1 • β ) , r + Δy + r • sin( – π/2 + 1 • β ) ]

    角 3 : [ r + Δx + r • cos( – π/2 + 2 • β ) , r + Δy + r • sin( – π/2 + 2 • β ) ]

    角 4 : [ r + Δx + r • cos( – π/2 + 3 • β ) , r + Δy + r • sin( – π/2 + 3 • β ) ]

    角 5 : [ r + Δx + r • cos( – π/2 + 4 • β ) , r + Δy + r • sin( – π/2 + 4 • β ) ]

    角 6 : [ r + Δx + r • cos( – π/2 + 5 • β ) , r + Δy + r • sin( – π/2 + 5 • β ) ]

    角 7 : [ r + Δx + r • cos( – π/2 + 6 • β ) , r + Δy + r • sin( – π/2 + 6 • β ) ]



四、获取正N边形每个点的坐标

由上可知我们可以得出正N边形的个点坐标:

令正n边形的边数为n 则 β = 2π / n

所以正n边形各个定点坐标为:

角    1   : [ r + Δx + r • cos( – π/2 + 0 • β ) , r + Δy + r • sin( – π/2 + 0 • β ) ]

角    2   : [ r + Δx + r • cos( – π/2 + 1 • β ) , r + Δy + r • sin( – π/2 + 1 • β ) ]

角    3   : [ r + Δx + r • cos( – π/2 + 2 • β ) , r + Δy + r • sin( – π/2 + 2 • β ) ]

角    4   : [ r + Δx + r • cos( – π/2 + 3 • β ) , r + Δy + r • sin( – π/2 + 3 • β ) ]

角    5   : [ r + Δx + r • cos( – π/2 + 4 • β ) , r + Δy + r • sin( – π/2 + 4 • β ) ]

• • • • • • •

• • • • • • •

• • • • • • •

角 n – 1 : { r + Δx + r • cos[ – π/2 + ( n – 2 ) • β ] , r + Δy + r • sin[ – π/2 + ( n – 2 ) • β ] }

角    n   : { r + Δx + r • cos[ – π/2 + ( n – 1 ) • β ] , r + Δy + r • sin[ – π/2 + ( n – 1 ) • β ] }



五、绘制View

两种计算七星图定点的坐标方法就算是讲完了,这样就可以开始我们的编码模块了,接下来我们将会使用这种动态的方式来计算绘制我们的七边形,在下一篇文章中我们将会进行编码模块,谢谢大家!



版权声明:本文为qq_33225399原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。