11.自定义控件-指南针

样式

compassView-gif.gif

控件分析：

线条分为3种
1.普通小线条；2每隔30°会绘制一个关键线条；3中间上部不变的指针
文字分为3种
1.边缘的度数标尺；2.方向标尺；3当前度数；4.当前方向

绘制思路：

• 绘制线条
  先绘制普通小线条，默认有120条 ，如果能绘制1条，那么根据坐标旋转公式就能算出其余线条的位置，所以先绘制最左边的小线条
  （80, height / 2） to ( 80+width * lineRateSize,height/2)
  这样就绘制好一条直线（即270°的横线）；
  之后根据旋转公式：
  x1=cos(angle)x-sin(angle)y;
  y1=cos(angle)y+sin(angle)x;
  (注意使用时要变换坐标原点此处坐标原点为(width / 2, height / 2) )
  可以轻易算出其余角小线段的两个端点位置，

    private static final float DIVIDE_COUNT = 120; //将圆划分为120等份
    private static final double CONVERSION_ANGLE_CONST = Math.PI / 180;  //转换角所用的常量

 //坐标旋转公式
    private float getRotatePointX(float a, float x, float y) {
        return (float) ((x - width / 2) * Math.cos(CONVERSION_ANGLE_CONST * a) + (y - height / 2) * Math.sin(CONVERSION_ANGLE_CONST * a)) + width / 2;
    }

    private float getRotatePointY(float a, float x, float y) {
        return (float) ((y - height / 2) * Math.cos(CONVERSION_ANGLE_CONST * a) - (x - width / 2) * Math.sin(CONVERSION_ANGLE_CONST * a)) + height / 2;
    }

其余线条绘制方法大致一样，修改修改参数就可以了。

• 绘制文字
  绘制文字时要保证的是文字的中点与小线段、圆心在一条直线上
  思路就是 先找文字的中点（图中的小红点），也是根据旋转公式得到的，所以他们肯定在一条直线上。
  找好点后再绘制文字时将文字偏移（textW/2,textH/2）就将文字放到中心了
  文字测量方法：

String test = "120°";
        Rect rect = new Rect();
        mTextPaint.getTextBounds(test, 0, test.length(), rect);
        textW = rect.width();//文字宽
        textH = rect.height();//文字高

其余文字大致也是这样找好文字位置再偏移致中点

• 屏幕适配
  按照之前的做法文字的大小无法根据控件的大小的改变而改变，
  导致当控件设置的大小较小时，文字依然是那么大，不太美观。
  所以就用渐变算法去确定文字大小

void initSize() {
        edgeTextSize = 38 - (1080 - width) / 30;
        edgeTextMargin = 50 - (1080 - width) / 30;
        orientationTextSize = 42 - (1080 - width) / 30;
        oriTextMargin = 92 - (1080 - width) / 12;
        angleTextSize = 60 - (1080 - width) * 4 / 75;
        rowPitch = 56 - (1080 - width) / 20;
        mainLineLength = 35 - (1080 - width) / 30;
    }

渐变公式推导：

△X1/△Y1 = △X2/△Y2        （暂定控件大小的可变范围为 480~1080）
=>>
(1080-480)/(x2-x1)= (1080-x) /(x2-y)
=>>
y= x2 - (1080-x)*(x2-x1)/(600)
文字大小的范围为[18-38]
y= 38 - (1080-x)*(38-18)/(600)
  =38 - (1080-x)/30

以此渐变文字大小

项目地址：
https://github.com/zhaolewei/CompassView