運(yùn)行效果：

繪制分為三步：
1、繪制蜘蛛網(wǎng)格線
2、繪制格中線
3、繪制數(shù)據(jù)

獲取中心點(diǎn)想x，y坐標(biāo)和半徑：

@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);//繪制蜘蛛網(wǎng)格線drawPolygon(canvas);//繪制格中線drawLine(canvas);//繪制數(shù)據(jù)drawRegion(canvas); }

繪制蜘蛛網(wǎng)格線：

/*** 繪制蜘蛛網(wǎng)格線* @param canvas*/ private void drawPolygon(Canvas canvas) {Path path = new Path();//每一圈之間的間距float r = radius / (count);for (int i = 1; i <= count; i++) {//當(dāng)前圈半徑float curR = r * i;path.reset();for (int j = 0; j < count; j++) {if (j == 0) {//第一個點(diǎn)path.moveTo(centerX + curR, centerY);} else {//根據(jù)半徑算出六邊形下一個點(diǎn)坐標(biāo)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);} }

第一個點(diǎn)的坐標(biāo)為：（centerX+radius,centerY）,下一個點(diǎn)的坐標(biāo)為：(centerX+radiuscos(α)，centerY+radiussin(α))，第三個點(diǎn)是：(centerX+radiuscos(α2)，centerY+radiussin(α2))。
通過path.lineTo(x，y)連接路徑。循環(huán)增加半徑繪制。

繪制格中線：

/*** 繪制格中線* @param canvas*/ private void drawLine(Canvas canvas) {Path path = new Path();for (int i = 0; i < count; i++) {path.reset();path.moveTo(centerX, centerY);float x = (float) (centerX + radius * Math.cos(angle * i));float y = (float) (centerY + radius * Math.sin(angle * i));path.lineTo(x, y);canvas.drawPath(path, radarPaint);} }

繪制數(shù)據(jù)：

/*** 繪制數(shù)據(jù)* @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);}//繪制圓點(diǎn)canvas.drawCircle(x, y, 10, valuePaint);}valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);canvas.drawPath(path, valuePaint); }

總結(jié)

以上是生活随笔為你收集整理的自定义蜘蛛网状图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。