運行效果圖
運行效果圖
雷達圖結(jié)構(gòu)分析
雷達圖結(jié)構(gòu)
對雷達圖進行結(jié)構(gòu)拆分莫辨，得到一個清晰的思路刃唤，這些結(jié)構(gòu)也就是需要繪制的部分。為了能夠有更好的擴展性坎缭，我將它們作為可定制的屬性暴露出來竟痰，以下是結(jié)構(gòu)屬性表：
| 結(jié)構(gòu) | 相關(guān)屬性 | 描述 |
|---|---|---|
| bone | boneColor | 骨架顏色 |
| - | boneWidth | 骨架寬度 |
| net | netColor | 網(wǎng)線顏色 |
| - | netWidth | 網(wǎng)線寬度 |
| node | nodeColor | 結(jié)點顏色 |
| - | nodeRadius | 結(jié)點半徑 |
| cover | coverColor | 覆蓋層（由各種屬性的值組成的覆蓋層）顏色 |
| text | textColor | 文本顏色 |
| - | textSize | 文本大小 |
| - | labelMargin | 文本與雷達圖間距 |
如何使用？以下是上面效果圖的代碼：
xml
<win.smartown.library.radarview.RadarView
android:id="@+id/radar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:boneColor="#5392FF"
app:boneWidth="0.5dp"
app:coverColor="#380392FF"
app:labelMargin="10dp"
app:netColor="#5392FF"
app:netWidth="1dp"
app:nodeColor="#53AFFF"
app:nodeRadius="3dp"
app:textColor="#868686"
app:textSize="12sp">
</win.smartown.library.radarview.RadarView>
設(shè)置適配器
RadarView radarView = findViewById(R.id.radar);
radarView.setAdapter(new RadarAdapter() {
@Override
public int getItemCount() {
return 12;
}
@Override
public int getMaxValue() {
return 5;
}
@Override
public int getValue(int position) {
if (position > getMaxValue()) {
return getMaxValue();
}
return position;
}
@Override
public String getName(int position) {
return "Label" + position;
}
});
難點總結(jié)
- 主要就是要計算各個點的坐標掏呼，每一個交叉點的坐標需要計算出來坏快，好在這是一個非常標準的數(shù)學(xué)模型，可以通過公式計算出來憎夷，以下是計算坐標的代碼：
//[centerX,centerY]為中心點坐標莽鸿，radius為待求坐標到中心點的距離
float x = (float) (centerX + radius * Math.cos(degree * Math.PI / 180));
float y = (float) (centerY + radius * Math.sin(degree * Math.PI / 180));
