多邊形網格圖譜屬性繪製

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/huangf321123/article/details/81408970

自定義多邊形網格圖譜屬性繪製詳解

首先，先展示效果圖。

本文接下來要講的就是多邊形的屬性繪製。

首先分析要繪製這樣的一個東西，它大概有哪些步驟。

1.畫出n(n >= 3)邊形，並分成5等分

2.繪製出多邊形的角與多邊形中心(默認是圓心)的連線

3.繪製多邊形角上的文字

4.繪製覆蓋在多邊形上的一個不規則多邊形，即所謂的技能熟練度

那接下來按照步驟來一步步完成該圖形

• 繪製n(n >= 3)邊形，並分成5等分

首先，我們可以想象一下把多邊形放在一個圓裏面，由於原點座標默認是在view的左上角，爲了繪製方便，把原點遷移到圓心。

canvas.translate(mOrigionX,mOrigionY);//把畫布原點遷移到該位置

這裏默認多邊形的第一個角座標是處於y軸負方向的。如下

剩下的角座標，都可以根據函數公式一一算出。代碼如下

 canvas.save();
        canvas.translate(mOrigionX,mOrigionY);//把畫布原點遷移到該位置
        for(int i = DEFAULT_FIVE_POLYGON; i > 0;i--){
            Path path = new Path();
            for (int j=0;j<mPolygonNum;j++){
                int angle = 360/mPolygonNum*j;
                if (j==0){
//                    path.moveTo(mRadius*cos(360/mPolygonNum*j)*i/DEFAULT_FIVE_POLYGON,
//                            mRadius*sin(360/mPolygonNum*j)*i/DEFAULT_FIVE_POLYGON);//繪製起點 :起點在x軸正方向
                    path.moveTo(0,-mRadius*i/DEFAULT_FIVE_POLYGON);//繪製起點 :起點在y軸負方向
                }else{
//                    path.lineTo(mRadius*cos(360/mPolygonNum*j)*i/DEFAULT_FIVE_POLYGON,
//                            mRadius*sin(360/mPolygonNum*j)*i/DEFAULT_FIVE_POLYGON);
                    path.lineTo(mRadius*sin(angle)*i/DEFAULT_FIVE_POLYGON,
                            -mRadius*cos(angle)*i/DEFAULT_FIVE_POLYGON);
                }
            }
            path.close();
            if(i%2 == 0){
                mPolygonPaint.setColor(mContext.getResources().getColor(R.color.color_f7f7f7));
            }else{
                mPolygonPaint.setColor(mContext.getResources().getColor(R.color.color_ffffff));
            }
            canvas.drawPath(path,mPolygonPaint);
            canvas.drawPath(path,mPolygonStrokePaint);
        }
        canvas.restore();

要注意，這是從外到裏面的繪製順序

• 繪製出多邊形的角與多邊形中心(默認是圓心)的連線

這個比較簡單，就是把原點座標與角座標連起來即可，

canvas.save();
        canvas.translate(mOrigionX,mOrigionY);//把畫布原點遷移到該位置
        Path path = new Path();
        path.moveTo(0,0);//繪製起點
        for (int i=0;i<mPolygonNum;i++){
            int angle = 360/mPolygonNum*i;
//            mPath.lineTo(mRadius*cos(360/mPolygonNum*i),mRadius*sin(360/mPolygonNum*i));
            path.lineTo(mRadius*sin(angle),-mRadius*cos(angle));
            path.close();
            canvas.drawPath(path,mPolygonStrokePaint);
        }
        canvas.restore();

• 繪製多邊形角上的文字

這個其實我也是從網上找的，大家可以看下代碼：

 canvas.save();
        canvas.translate(mOrigionX,mOrigionY);//把畫布原點遷移到該位置
        for (int i=0;i<mPolygonNum;i++){
            String text = mDatas.get(i);
            Rect rect = new Rect();
            mTextPaint.getTextBounds(text, 0, text.length(), rect);
            float textWidth = rect.width();//文字寬
            float textHeight = rect.height();//文字高

            float x = mRadius*sin(360/mPolygonNum*i);
            float y = -mRadius*cos(360/mPolygonNum*i);
//            float x = mRadius*cos(360/mPolygonNum*i);
//            float y = mRadius*sin(360/mPolygonNum*i);
            //位置微調
            if (x < 0) {
                x = x - textWidth;
            }
            if (y > 25) {
                y = y + textHeight;
            }
            //調文字與邊框的邊距
            float LastX = x + x / mPolygonNum / mPolygonNum;
            float LastY = y + y / mPolygonNum / mPolygonNum;
            canvas.drawText(text, LastX, LastY, mTextPaint);

        }
        canvas.restore();

• 繪製覆蓋在多邊形上的一個不規則多邊形

繪製這個不規則多邊形其實跟第一步差不多

canvas.save();
        canvas.translate(mOrigionX,mOrigionY);//把畫布原點遷移到該位置
        Path path = new Path();
        for (int i=0;i<mPolygonNum;i++){
            float percent = mDataPercent.get(i);
            if (i==0){
                path.moveTo(0,-mRadius*percent);//繪製起點:起點在y軸負方向
            }else{
                path.lineTo(mRadius*sin(360/mPolygonNum*i)*percent,-mRadius*cos(360/mPolygonNum*i)*percent);
            }
        }
        path.close();
        mSkillPointPaint.setColor(mContext.getResources().getColor(R.color.color_FEEEE8));
        mSkillPointPaint.setStyle(Paint.Style.FILL);
        canvas.drawPath(path,mSkillPointPaint);
        mSkillPointPaint.setColor(mContext.getResources().getColor(R.color.color_5711));
        mSkillPointPaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path,mSkillPointPaint);
        canvas.restore();

主要是要得到它在每根對角線上的佔比，計算出座標，然後通過path進行繪製就ok。

到此爲止，一個多邊形網格屬性圖就繪製完成了。謝謝大家的觀看。。

代碼下載