android開發自定義View(四)仿掌上英雄聯盟能力值分析效果

原始圖效果

---

 <喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMiBpZD0="模仿效果">模仿效果

---

PNG


GIF

 

流程

---

繪制中心線，用於計算外層多邊形各點的坐標 繪制最外層多邊形 分析原型圖算出每個多邊形之間的間距 繪制裡三層多邊形 繪制字體

根據進度值繪制等級進度

 

難點

---

關鍵在於坐標的計算(三角函數的運用，哈哈)，與旋轉角度的掌控。


 

繪制中心線

---

/**
     * 繪制中心線
     *
     * @param canvas
     */
    private void center(Canvas canvas) {
        //繪制七邊形中心線
        canvas.save();//保存當前狀態
        canvas.rotate(0, center, center);
        float startY = getPaddingTop() + 2 * str_rect.height();
        float endY = center;
        float du = (float) (360 / 7 + 0.5);
        for (int i = 0; i < 7; i++) {
            canvas.drawLine(center, startY, center, endY, center_paint);
            canvas.rotate(du, center, center);

        }
        canvas.restore();//恢復之前狀態
    }

先計算出圓心到A點的坐標，
在計算出旋轉的角度（360/7），
然後旋轉7次Canvas，繪制7條中心線。
為了加深顯示效果，先繪制一個綠色背景作參考。

 

繪制最外層正七邊形

---

各坐標點的計算主要用到了三角函數。

A點

x ： 對應圓心center。
y ：paddingTop+2個字體高度的距離

B點
seorRUI8L3A+DQo8cD7A+9PDyP29x7qvyv25q8q9o6xCRT1zaW4oQUK1xLzQvccpKk9CPC9wPg0KPHA+1eLA79PQuPa/06OsTWF0aC5zaW4oeCnA77XEeMrHu6G2yKOstviyu8rHvce2yKGjPC9wPg0KPHA+yOe5+9KqvMbL473HtsjU8tDo0qq808nPTWF0aC5zaW4oTWF0aC50b1JhZGlhbnMoeCkpPC9wPg0KPHA+Y2VudGVyKyBNYXRoLnNpbihNYXRoLnRvUmFkaWFucygzNjAvNykpICpvbmVfcmFkaXVzPC9wPg0KPHA+eSCjukG147XEedf4seorQUU8L3A+DQo8cD7NrMDtQUU9T0EtT0UsT0U9Y29zKEFCtcS80L3HKSpPQjwvcD4NCjxwPk9FPWNvcyhBQrXEvNC9xykqT0I8L3A+DQo8cD5NYXRoLmFicyhNYXRoLmNvcyhNYXRoLnRvUmFkaWFucygzNjAvNykpICpvbmVfcmFkaXVzPC9wPg0KPHA+08nT2tPgz9LT0NX9uLrWtaOs1eLA79KqyKG++LbU1rU8L3A+DQo8cD5BRT1PQS1PRTwvcD4NCjxwPihnZXRQYWRkaW5nVG9wKCkgKzIqc3RyX3JlY3QuaGVpZ2h0KCkgK29uZV9yYWRpdXM8L3A+DQpNYXRoLmFicyhNYXRoLmNvcyhNYXRoLnRvUmFkaWFucygzNjAvNykpICpvbmVfcmFkaXVzKSkNCjxwPkO14zxiciAvPg0KPGltZyBhbHQ9"這裡寫圖片描述" src="/uploadfile/Collfiles/20160929/20160929092109199.png" title="\" />
x :圓心X+FC
Math.sin(Math.toRadians(360/7+360/7/2)) *one_radius

y: 圓心Y+OF
(Math.cos(Math.toRadians(360/7+360/7/2)) *one_radius) +center

D點

x :圓心x+HD

center+ Math.sin(Math.toRadians(360/7/2)) *one_radius

y：圓心y+OH

Math.cos(Math.toRadians(360/7/2)) *one_radius) +center

右邊點繪制完後，左邊點自然就簡單了，y位置一樣，x位置只需要把相加改成相減即可。

 

繪制內三層正七邊形

---

繪制完最外層七邊形後，剩下來的就好辦了，只需要計算出每個七邊形的間距即可。
由原型圖分析，每一個正七邊形占半徑的四分之一。

 /**
     * 繪制第二層多邊形
     *
     * @param canvas
     */
    private void twoPolygons(Canvas canvas) {
        distance = one_radius / 4;
        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance);                           //起始點
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.close();
        canvas.drawPath(path, two_paint);
    }

    /**
     * 繪制第三層多邊形
     *
     * @param canvas
     */
    private void threePolygons(Canvas canvas) {
        distance = one_radius / 2;
        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance);                           //起始點
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));

        path.close();
        canvas.drawPath(path, three_paint);
    }

    /**
     * 繪制最內層多邊形
     *
     * @param canvas
     */
    private void fourPolygons(Canvas canvas) {
        distance = one_radius / 2 + one_radius / 4;
        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance);                           //起始點
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance))));

        path.close();
        canvas.drawPath(path, four_paint);
    }

去掉綠色背景後，顯示的效果

 

繪制字體

---

根據最外層多邊形各點坐標以及字體的長度高度 微調。

privateRectstr_rect;//字體矩形

String[]str= {"擊殺","生存","助攻","物理","魔法","防御","金錢"};

 /**
     * 繪制字體
     *
     * @param canvas
     */
    private void PaintFout(Canvas canvas) {
        canvas.drawText(str[0], center - str_rect.width() / 2, (float) (getPaddingTop() + 1.5 * str_rect.height()), str_paint);
        canvas.drawText(str[1], (float) (center + Math.sin(Math.toRadians(360 / 7)) * one_radius + str_rect.height() / 2), (float) ((getPaddingTop() + 2 * str_rect.height() + one_radius - Math.abs(Math.cos(Math.toRadians(360 / 7)) * one_radius))), str_paint);
        canvas.drawText(str[2], (float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius + str_rect.height() / 2), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius) + center + str_rect.height() / 2, str_paint);
        canvas.drawText(str[3], (float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * one_radius - str_rect.height() / 2 + str_rect.width() / 2), (float) ((Math.cos(Math.toRadians(360 / 7 / 2)) * one_radius) + center + str_rect.height()), str_paint);
        canvas.drawText(str[4], (float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * one_radius + str_rect.height() / 2 - str_rect.width() * 1.5), (float) ((Math.cos(Math.toRadians(360 / 7 / 2)) * one_radius) + center + str_rect.height()), str_paint);
        canvas.drawText(str[5], (float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius - str_rect.height() / 2 - str_rect.width()), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius) + center + str_rect.height() / 2, str_paint);
        canvas.drawText(str[6], (float) (center - Math.sin(Math.toRadians(360 / 7)) * one_radius - str_rect.height() / 2 - str_rect.width()), (float) ((getPaddingTop() + 2 * str_rect.height() + one_radius - Math.abs(Math.cos(Math.toRadians(360 / 7)) * one_radius))), str_paint);

    }

 

繪制各能力值進度

---

 /**
     * 繪制等級進度
     */
    private void PaintRank(Canvas canvas) {

        Path path = new Path();
        path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + f1);                           //起始點
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - f2)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - f2))));
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f3)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f3)) + center);
        path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - f4)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - f4)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - f5)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - f5)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f6)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f6)) + center);
        path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - f7)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - f7))));
        path.close();
        canvas.drawPath(path, mPaint);

    }

感興趣的同學可直接到github下載源碼查看。
如果你覺得還不錯，可以給個star，支持下，謝謝了！
https://github.com/jiangzehui/polygonsview