自定义蜘蛛网状图
運行效果:
繪制分為三步:
1、繪制蜘蛛網格線
2、繪制格中線
3、繪制數據
獲取中心點想x,y坐標和半徑:
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {radius = Math.min(w, h) / 2 * 0.9f;centerX = w / 2;centerY = h / 2;postInvalidate();super.onSizeChanged(w, h, oldw, oldh); }onDraw()方法:
@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);//繪制蜘蛛網格線drawPolygon(canvas);//繪制格中線drawLine(canvas);//繪制數據drawRegion(canvas); }繪制蜘蛛網格線:
/*** 繪制蜘蛛網格線* @param canvas*/ private void drawPolygon(Canvas canvas) {Path path = new Path();//每一圈之間的間距float r = radius / (count);for (int i = 1; i <= count; i++) {//當前圈半徑float curR = r * i;path.reset();for (int j = 0; j < count; j++) {if (j == 0) {//第一個點path.moveTo(centerX + curR, centerY);} else {//根據半徑算出六邊形下一個點坐標float x = (float) (centerX + curR * Math.cos(angle * j));float y = (float) (centerY + curR * Math.sin(angle * j));path.lineTo(x, y);}}path.close();canvas.drawPath(path, radarPaint);} }第一個點的坐標為:(centerX+radius,centerY),下一個點的坐標為:(centerX+radiuscos(α),centerY+radiussin(α)),第三個點是:(centerX+radiuscos(α2),centerY+radiussin(α2))。
通過path.lineTo(x,y)連接路徑。循環增加半徑繪制。
繪制格中線:
繪制數據:
/*** 繪制數據* @param canvas*/ private void drawRegion(Canvas canvas) {Path path = new Path();valuePaint.setAlpha(127);for (int i = 0; i < count; i++) {double percent = data[i] / maxValue;float x = (float) (centerX + radius * Math.cos(angle * i) * percent);float y = (float) (centerY + radius * Math.sin(angle * i) * percent);if (i == 0) {path.moveTo(x, centerY);} else {path.lineTo(x, y);}//繪制圓點canvas.drawCircle(x, y, 10, valuePaint);}valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);canvas.drawPath(path, valuePaint); }總結
- 上一篇: Logging Operator - 优
- 下一篇: 电动机制动