效果图如下:
- 五边形
三角行
六边形
七边形
十二边形
这个效果其实并不是特别的难,只要知道了原理其实很简单
这里为了简单,数据都是直接写死的,有兴趣的可以把共有属性拿出来通过自定义属性来实现
难点
主要是怎么根据角度计算圆上的坐标,直接上代码
float centerX = 100f; // 已知圆心X坐标为100
float centerY = 100f; // 已知圆心Y坐标为100
float radius = 100f; // 已知半径为100
float angle = 45f; // 已知角度为45°
double radians = Math.toRadians(angle); // 计算出弧度
float x = (float) (centerX + Math.sin(radians) * radius); // 计算出X坐标
float y = (float) (centerY - Math.cos(radians) * radius); // 计算出Y坐标
知道了圆上坐标的获取后就比较简单了,我们一步一步开始来吧
一、绘制蜘蛛网
我们先把各个层次的圆绘制出来,先从圆上整理思路:
for (int i = 1; i <= angleCount; i++) {
canvas.drawCircle(spiderX,spiderY,hierarchy*i,spiderPaint);
}
既然每层的圆已经出来了,那就简单了 我们只需要根据角度去计算圆上的坐标不就行了,然后通过 Path 将各个点组合绘制就OK了
绘制网
float nextRadians; //下个角的度数 总是相加
float spiderStartX; //x 坐标
float spiderStartY; //角度坐标
float nextHierarchy; //下一个圆的半径 最大为 radius
for (int i = 1; i <= angleCount; i++) {
canvas.drawCircle(spiderX, spiderY, hierarchy * i, spiderPaint);
//重置路径
spiderPath.reset();
for (int j = 1; j <= angleCount; j++) {
// //绘制蜘蛛网需要使用到的数据
nextHierarchy = hierarchy * i; //每层圆的半径
nextRadians = (float) (radians * j); //每个角的角度
spiderStartX = (float) (spiderX + Math.