多边形网格图谱属性绘制

自定义多边形网格图谱属性绘制详解

首先，先展示效果图。

本文接下来要讲的就是多边形的属性绘制。

首先分析要绘制这样的一个东西，它大概有哪些步骤。

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。

到此为止，一个多边形网格属性图就绘制完成了。谢谢大家的观看。。

代码下载