android 自定义五边形图片,Android自定义View-蜘蛛网属性图（五边形图）
首先看看效果图：
这里写图片描述
先简要说一下这里需要涉及到的知识点：
高中基本的三角函数 Sin，Cos。
参考的文章：
这里为了尊重上面这篇文章的作者，需要说明一下，下面的代码有部分是参考上面这篇文章的。这里我学习之后有了自己的理解。做了一点小改动，然后以自己的思路来捋一捋。希望我的文字对你更有帮助，哈哈。 (Pentagon --五边形)
绘制思路：
计算三个五边形的五个顶点的坐标，用 path 连接起来并绘制
计算要显示的数据的五个顶点的坐标，用 path 连接起来并绘制
绘制五条射线
计算图标和标题的坐标位置，并绘制
绘制中间的分数
第一步：绘制三个五边形和红色五边形
这里写图片描述
初始化成员变量
private int dataCount = 5;//多边形维度
private float radian = (float) (Math.PI * 2 / dataCount);//每个维度的角度
private float radius;//一条星射线的长度，即是发散的五条线白线
private int centerX;//中心坐标 Y
private int centerY;//中心坐标 X
private String[] titles = {"履约能力", "信用历史", "人脉关系", "行为偏好", "身份特质"};//标题
private int[] icos = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};//五个维度的图标
private float[] data = {170, 180, 100, 170, 150};//五个维度的数据值
private float maxValue = 190;//每个维度的最大值
private Paint mPaintText;//绘制文字的画笔
private int radarMargin = 40;//
private int mAlpha;//白色五边形的透明度
private Path mPentagonPath;//记录白色五边形的路径
private Paint mPentagonPaint;//绘制白色五边形的画笔
private Path mDataPath;//记录红色五边形的路径
private Paint mDataPaint;//绘制红色五边形的画笔
构造方法中初始化的数据
private void init() {
mPentagonPaint = new Paint();//初始化白色五边形的画笔
mPentagonPaint.setAntiAlias(true);//
mPentagonPaint.setStrokeWidth(5);//
mPentagonPaint.setColor(Color.WHITE);//
mPentagonPaint.setStyle(Paint.Style.FILL_AND_STROKE);//
mDataPaint = new Paint();//初始化红色五边形的画笔
mDataPaint.setAntiAlias(true);//
mDataPaint.setStrokeWidth(10);//
mDataPaint.setColor(Color.RED);//
mDataPaint.setAlpha(150);//
mDataPaint.setStyle(Paint.Style.STROKE);//
mPaintText = new Paint();//初始化文字画笔
mPaintText.setAntiAlias(true);//
mPaintText.setTextSize(50);//
mPaintText.setColor(Color.WHITE);//
mPaintText.setStyle(Paint.Style.FILL);//
mPentagonPath = new Path();//初始化白色五边形路径
mDataPath = new Path();//初始化红色五边形路径
radius = 80;//星射线的初始值，也是最小的五边形的一条星射线的长度(后期会递增)
mAlpha = 150;//白色五边形的透明度(后期后递减)
}
初始化数据之后是通过 radius 的长度来计算五边形五个顶点的坐标值，后期通过改变 radius 的值，来达到计算三个白色五边形的五个顶点的值。这里给出一张图，帮助理解。通过图中的两个红色三角形就可以求出顶点的坐标了。
这里写图片描述
**右上角的顶点为第一个点，顺时针计算，position 依次是 0，1，2，3，4 **
public Point getPoint(int position) {
return getPoint(position, 0, 1);
}
// 参数：position：顶点的位置，radarMargin：边距，percent：星射线长度的百分比，用于计算红色五边形的顶点
public Point getPoint(int position, int radarMargin, float percent) {//以五边形的中心点为坐标原点
int x = 0;
int y = 0;
switch (position) {
case 0://第一象限，右上角顶点的坐标计算
x = (int) (centerX + (radius + radarMargin) * Math.sin(radian) * percent);
y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);
break;
case 1://第四象限，右下角顶点的坐标计算
x = (int) (centerX + (radius + radarMargin) * Math.sin(radian / 2) * percent);
y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);
break;
case 2://第三象限，左下角顶点的坐标计算
x = (int) (centerX - (radius + radarMargin) * Math.sin(radian / 2) * percent);
y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);
break;
case 3://第二象限，左上角顶点的坐标计算
x = (int) (centerX - (radius + radarMargin) * Math.sin(radian) * percent);
y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);
break;
case 4:// Y 轴正方向顶点的计算
x = centerX;
y = (int) (centerY - (radius + radarMargin) * percent);
break;
}
return new Point(x, y);
}
基础工作都做足了，那么就进行五边形的绘制了
private void drawPentagon(Canvas canvas) {
for (int j = 0; j < 3; j++) {//绘制三层白色五边形
radius += 70;//每一层五边形的星射线增加 70 的长度
mAlpha -= 30;//每一层五边形的透明度减少 30
mPentagonPaint.setAlpha(mAlpha);
for (int i = 0; i < dataCount; i++) {//绘制一层
if (i == 0) {
mPentagonPath.moveTo(getPoint(i).x, getPoint(i).y);
} else {
mPentagonPath.lineTo(getPoint(i).x, getPoint(i).y);
}
}
mPentagonPath.close();
canvas.drawPath(mPentagonPath, mPentagonPaint);
}
for (int i = 0; i < dataCount; i++) {//绘制红色五边形
float percent = data[i] / maxValue;//数据值与最大值的百分比
if (i == 0) {
mDataPath.moveTo(getPoint(i, 0, percent).x, getPoint(i, 0, percent).y);//通过百分比计算出红色顶点的位置
} else {
mDataPath.lineTo(getPoint(i, 0, percent).x, getPoint(i, 0, percent).y);
}
}
mDataPath.close();
canvas.drawPath(mDataPath, mDataPaint);
}
第二步：绘制五条星射线
先来看看这一步的效果图：
这里写图片描述
绘制好五边形之后 radius 的值已经为最大五边形的星射线的长度了。
private void drawFiveLine(Canvas canvas) {
mPentagonPaint.setColor(Color.WHITE);//设置颜色为白色
mPentagonPaint.setStrokeWidth(2);//设置宽度为2
for (int i = 0; i < dataCount; i++) {
canvas.drawLine(centerX, centerY, getPoint(i).x, getPoint(i).y, mPentagonPaint);//绘制
}
}
第三步：绘制五个标题
先来看看这一步的效果图：
这里写图片描述
在这一步，相对难一点的就是坐标的计算了。第一个顶点的坐标经过添加 radarMargin 值之后就可以直接使用了，其他顶点还需要经过计算得到。这里其实就是要计算每一个 Title 文字左下角的坐标。那么计算坐标的代码是这样的：
private void drawTitle(Canvas canvas) {
for (int i = 0; i < dataCount; i++) {
int x = getPoint(i, radarMargin, 1).x;//获取添加 radarMargin 值之后的 X 坐标的指
int y = getPoint(i, radarMargin, 1).y;//获取添加 radarMargin 值之后的 Y 坐标的指
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icos[i]);
int iconHeight = bitmap.getHeight();
int titleWidth = (int) mPaintText.measureText(titles[i]);
switch (i) {
case 1://说明一下为什么是 iconHeight / 2 ，主要是因为这样会比较好看
y += iconHeight / 2;
break;
case 2:
x -= titleWidth;
y += iconHeight / 2;
break;
case 3:
x -= titleWidth;
break;
case 4:
x -= titleWidth / 2;
break;
}
canvas.drawText(titles[i], x, y, mPaintText);
}
}
第四步：绘制图标
先来看看这一步的效果：
这里写图片描述
这一步也是要进行坐标的计算，主要的计算出放置图标左上角的坐标值。这里还是相对简单一点，不需要用到三角函数。
private void drawIcon(Canvas canvas) {
for (int i = 0; i < dataCount; i++) {
int x = getPoint(i, radarMargin, 1).x;//获取添加 radarMargin 值之后的 X 坐标的指
int y = getPoint(i, radarMargin, 1).y;//获取添加 radarMargin 值之后的 Y 坐标的指
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icos[i]);
int iconHeight = bitmap.getHeight();
int iconWidth = bitmap.getWidth();
int titleWidth = (int) mPaintText.measureText(titles[i]);
switch (i) {
case 0:
x += (titleWidth - iconWidth) / 2;
y -= (iconHeight + getTextHeight(titles[i]));
break;
case 1:
x += (titleWidth - iconWidth) / 2;
y -= (iconHeight / 2 + getTextHeight(titles[i]));
break;
case 2:
x -= titleWidth - (titleWidth - iconWidth) / 2;
y -= (iconHeight / 2 + getTextHeight(titles[i]));
break;
case 3:
x -= titleWidth - (titleWidth - iconWidth) / 2;
y -= (iconHeight + getTextHeight(titles[i]));
break;
case 4:
x -= (iconHeight / 2);
y -= (iconHeight + getTextHeight(titles[i]));
break;
}
canvas.drawBitmap(bitmap, x, y, mPaintText);
}
}
第五步：绘制中心点的分数
这一步完成之后就可以得到最终效果了，就是图一的效果：
这里写图片描述
文字的坐标是中心点，那么计算出文字的宽度和高度就可以居中显示文字了。
private void drawScore(Canvas canvas) {
mPaintText.setColor(getResources().getColor(R.color.colorAccent));
int score = 0;
for (int i = 0; i < data.length; i++) {//累加分数值
score += data[i];
}
String str_score = String.valueOf(score);
Paint.FontMetrics fm = mPaintText.getFontMetrics();//用于计算文字的高度
canvas.drawText(str_score, centerX - mPaintText.measureText(str_score) / 2, (centerY + (int) Math.ceil(fm.descent - fm.ascent) / 2), mPaintText);
}
总结
一步步下来，对自定义 view 也有了进一步的了解。感觉需要更多的练习才能完全 hold 住。如果文中有什么知识点是错误的或者更好的实现方法，请及时联系我进行修改，以免误导别人。谢谢。那么完整的代码是这样的。
/**
* Created by zone on 2017/4/9.
*/
public class PentagonView extends View {
private int dataCount = 5;//多边形维度，这里是五边形
private float radian = (float) (Math.PI * 2 / dataCount);//每个维度的角度
private float radius;//一条星射线的长度，即是发散的五条线白线
private int centerX;//中心坐标 Y
private int centerY;//中心坐标 X
private String[] titles = {"履约能力", "信用历史", "人脉关系", "行为偏好", "身份特质"};//标题
private int[] icos = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};//五个维度的图标
private float[] data = {170, 180, 100, 170, 150};//五个维度的数据值
private float maxValue = 190;//每个维度的最大值
private Paint mPaintText;//绘制文字的画笔
private int radarMargin = 40;//
private int mAlpha;//白色五边形的透明度
private Path mPentagonPath;//记录白色五边形的路径
private Paint mPentagonPaint;//绘制白色五边形的画笔
private Path mDataPath;//记录红色五边形的路径
private Paint mDataPaint;//绘制红色五边形的画笔
public PentagonView(Context context) {
super(context);
init();
}
public PentagonView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public PentagonView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public PentagonView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
mPentagonPaint = new Paint();//初始化白色五边形的画笔
mPentagonPaint.setAntiAlias(true);//
mPentagonPaint.setStrokeWidth(5);//
mPentagonPaint.setColor(Color.WHITE);//
mPentagonPaint.setStyle(Paint.Style.FILL_AND_STROKE);//
mDataPaint = new Paint();//初始化红色五边形的画笔
mDataPaint.setAntiAlias(true);//
mDataPaint.setStrokeWidth(10);//
mDataPaint.setColor(Color.RED);//
mDataPaint.setAlpha(150);//
mDataPaint.setStyle(Paint.Style.STROKE);//
mPaintText = new Paint();//初始化文字画笔
mPaintText.setAntiAlias(true);//
mPaintText.setTextSize(50);//
mPaintText.setColor(Color.WHITE);//
mPaintText.setStyle(Paint.Style.FILL);//
mPentagonPath = new Path();//初始化白色五边形路径
mDataPath = new Path();//初始化红色五边形路径
radius = 80;//星射线的初始值，也是最小的五边形的一条星射线的长度(后期会递增)
mAlpha = 150;//白色五边形的透明度(后期后递减)
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(getResources().getColor(R.color.colorAccent));
centerX = getWidth() / 2;
centerY = getHeight() / 2;
drawPentagon(canvas);//绘制白色五边形和红色五边形
drawFiveLine(canvas);//绘制五条星射线
drawTitle(canvas);//绘制五个标题
drawIcon(canvas);//绘制五个图标
drawScore(canvas);//绘制中间的分数
}
private void drawPentagon(Canvas canvas) {
for (int j = 0; j < 3; j++) {//绘制三层白色五边形
radius += 70;//每一层五边形的星射线增加 70 的长度
mAlpha -= 30;//每一层五边形的透明度减少 30
mPentagonPaint.setAlpha(mAlpha);
for (int i = 0; i < dataCount; i++) {//绘制一层
if (i == 0) {
mPentagonPath.moveTo(getPoint(i).x, getPoint(i).y);
} else {
mPentagonPath.lineTo(getPoint(i).x, getPoint(i).y);
}
}
mPentagonPath.close();
canvas.drawPath(mPentagonPath, mPentagonPaint);
}
for (int i = 0; i < dataCount; i++) {//绘制红色五边形
float percent = data[i] / maxValue;//数据值与最大值的百分比
if (i == 0) {
mDataPath.moveTo(getPoint(i, 0, percent).x, getPoint(i, 0, percent).y);//通过百分比计算出红色顶点的位置
} else {
mDataPath.lineTo(getPoint(i, 0, percent).x, getPoint(i, 0, percent).y);
}
}
mDataPath.close();
canvas.drawPath(mDataPath, mDataPaint);
}
private void drawFiveLine(Canvas canvas) {
mPentagonPaint.setColor(Color.WHITE);//设置颜色为白色
mPentagonPaint.setStrokeWidth(2);//设置宽度为2
for (int i = 0; i < dataCount; i++) {
canvas.drawLine(centerX, centerY, getPoint(i).x, getPoint(i).y, mPentagonPaint);//绘制
}
}
private void drawIcon(Canvas canvas) {
for (int i = 0; i < dataCount; i++) {
int x = getPoint(i, radarMargin, 1).x;//获取添加 radarMargin 值之后的 X 坐标的指
int y = getPoint(i, radarMargin, 1).y;//获取添加 radarMargin 值之后的 Y 坐标的指
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icos[i]);
int iconHeight = bitmap.getHeight();
int iconWidth = bitmap.getWidth();
int titleWidth = (int) mPaintText.measureText(titles[i]);
switch (i) {
case 0:
x += (titleWidth - iconWidth) / 2;
y -= (iconHeight + getTextHeight(titles[i]));
break;
case 1:
x += (titleWidth - iconWidth) / 2;
y -= (iconHeight / 2 + getTextHeight(titles[i]));
break;
case 2:
x -= titleWidth - (titleWidth - iconWidth) / 2;
y -= (iconHeight / 2 + getTextHeight(titles[i]));
break;
case 3:
x -= titleWidth - (titleWidth - iconWidth) / 2;
y -= (iconHeight + getTextHeight(titles[i]));
break;
case 4:
x -= (iconHeight / 2);
y -= (iconHeight + getTextHeight(titles[i]));
break;
}
canvas.drawBitmap(bitmap, x, y, mPaintText);
}
}
private int getTextHeight(String text) {
Paint.FontMetrics fm = mPaintText.getFontMetrics();
return (int) Math.ceil(fm.descent - fm.ascent);
}
private void drawTitle(Canvas canvas) {
for (int i = 0; i < dataCount; i++) {
int x = getPoint(i, radarMargin, 1).x;//获取添加 radarMargin 值之后的 X 坐标的指
int y = getPoint(i, radarMargin, 1).y;//获取添加 radarMargin 值之后的 Y 坐标的指
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), icos[i]);
int iconHeight = bitmap.getHeight();
int titleWidth = (int) mPaintText.measureText(titles[i]);
switch (i) {
case 1://说明一下为什么是 iconHeight / 2 ，主要是因为这样会比较好看
y += iconHeight / 2;
break;
case 2:
x -= titleWidth;
y += iconHeight / 2;
break;
case 3:
x -= titleWidth;
break;
case 4:
x -= titleWidth / 2;
break;
}
canvas.drawText(titles[i], x, y, mPaintText);
}
}
private void drawScore(Canvas canvas) {
mPaintText.setColor(getResources().getColor(R.color.colorAccent));
int score = 0;
for (int i = 0; i < data.length; i++) {//累加分数值
score += data[i];
}
String str_score = String.valueOf(score);
Paint.FontMetrics fm = mPaintText.getFontMetrics();//用于计算文字的高度
canvas.drawText(str_score, centerX - mPaintText.measureText(str_score) / 2, (centerY + (int) Math.ceil(fm.descent - fm.ascent) / 2), mPaintText);
}
public Point getPoint(int position) {
return getPoint(position, 0, 1);
}
// 右上角的顶点为第一个点，顺时针计算，position 依次是 0，1，2，3，4
// 参数：position：顶点的位置，radarMargin：边距，percent：星射线长度的百分比，用于计算红色五边形的顶点
public Point getPoint(int position, int radarMargin, float percent) {//以五边形的中心点为坐标原点
int x = 0;
int y = 0;
switch (position) {
case 0://第一象限，右上角顶点的坐标计算
x = (int) (centerX + (radius + radarMargin) * Math.sin(radian) * percent);
y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);
break;
case 1://第四象限，右下角顶点的坐标计算
x = (int) (centerX + (radius + radarMargin) * Math.sin(radian / 2) * percent);
y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);
break;
case 2://第三象限，左下角顶点的坐标计算
x = (int) (centerX - (radius + radarMargin) * Math.sin(radian / 2) * percent);
y = (int) (centerY + (radius + radarMargin) * Math.cos(radian / 2) * percent);
break;
case 3://第二象限，左上角顶点的坐标计算
x = (int) (centerX - (radius + radarMargin) * Math.sin(radian) * percent);
y = (int) (centerY - (radius + radarMargin) * Math.cos(radian) * percent);
break;
case 4:// Y 轴正方向顶点的计算
x = centerX;
y = (int) (centerY - (radius + radarMargin) * percent);
break;
}
return new Point(x, y);
}
}
android 自定义五边形图片,Android自定义View-蜘蛛网属性图（五边形图）相关推荐
- android前台渲染图片，自定义View
android前台渲染,主要是重写view的ondraw方法,在canvas里操作 自定义MyView类 package com.ssln;import android.annotation.Supp ...
- android 横向滚动图片,Android使用Photoview实现图片左右滑动及缩放功能
Android使用Photoview实现图片左右滑动及缩放功能 发布时间:2020-10-12 14:51:12 来源:脚本之家 阅读:119 作者:kuaizilanqiu 我想,不管是做什么样的a ...
- android 编辑9图片,Android .9.png图片的处理
android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会模糊失真,在android平台下使用点九PNG技术,可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果. ...
- android气泡样式图片,Android实现三角形气泡效果方式汇总
在开发过程中,我们可能会经常遇到这样的需求样式: 这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上.下.左.右. 通过截图可以发现,气泡 ...
- android xml 圆形图片,Android ImageView实现圆角，圆形图片
UI设计中,为了有更好的效果,用户的头像很多以圆形方式显示,其实现的步骤 1 在res/values/attrs中添加 2 自定义View,CustomImageView.java package c ...
- android 动态广告图片,android – 如何在动态壁纸的设置屏幕中添加一个admob广告视图？...
这是一个更简单的解决方案:创建一个显示单个广告的新首选项类型.然后,您可以在首选项的xml定义中包含该首选项类型,以显示一个或多个广告. 自定义偏好类: public class AdmobPrefe ...
- android canvas 背景图片,Android更改canvas背景颜色而不会丢失任何图纸
已经给出了你的问题的答案都指向了正确的方向:你需要在单独的图层中分离背景颜色块和前景图,然后合并它们,然后将它们全部保存在.png文件中. 这就是Adobe Photoshop工作流程的设计--如果我 ...
- android jar 加入图片,Android动态加载外部jar包及jar包中图片等资源文件
Android动态加载外部jar包及jar包中图片等资源文件 Android应用程序由Java开发,因此Java中许多实用的特性,在Android中也有体现.动态加载Class,也就是外部jar包,在 ...
- android 聊天背景图片,Android 实现从本地读取图片更改聊天背景
现在很多社交软件都有这个功能,因为本次我参加一个比赛也是要做一个社交软件,所以我就"画蛇添足"的添加了这个一个功能,因为我也是个Android初学者,所以说修改bug浪费了我至少1 ...
最新文章
- 第一次 C语言课程设计
- AI独角兽增援抗疫拉锯战，旷视守“城”，依图出“机”
- Android 底层驱动开发步骤——linux内核层、HAL层、JNI层
- C++与Qt开发人机象棋(第二部分)
- （篇十）用结构体数组处理学生成绩、结构体类型函数求平均值
- php libswf,PHP停解析swf文件头
- 01背包和完全背包 的完整讲解版 包含 一维数组实现 和二维数组实现题目
- 【强化学习】CARLA——Windows安装
- 基建管控系统_基建项目管理系统
- 使用VS Code插件Code Runner一键运行ANSYS命令流
- Android中各个国家语言对应的系统资源文件夹名称及对应简写
- c# 解决 DataGridView 排序后颜色丢失
- 多传感器融合定位 第七章 基于滤波的融合方法
- Redis为什么是单线程？高并发响应快？
- 大数据体系构建数据仓库
- FHD、4K、8K为何物
- app如何更换用户头像信息呢？不妨这样做
- CSS 3.0实现泡泡特效
- 抽象类和接口之间的关系
- https网站打不开如何解决
热门文章
- 【Java】不会真的有人还不知道JavaBean是咖啡豆吧
- python快速注释html5_P29-30《Python爬虫技术5天速成…》学习过程笔记16（超详细记录）...
- 一次性纸杯包含的测试点
- win10家庭版访问域文件服务器拒绝,Win10系统下文件夹访问被拒绝处理方法
- 彻底关闭Windows10_21h1任务栏里的资讯和兴趣广告
- 第三方支付“千万元罚单”与“紧箍咒”齐飞
- Andriod之132个最佳问题
- 帮我写一个计算平面度的C#程序
- visual basic自定义排序
- 技术文档：航顺芯片，航顺MCU,电机驱动方案“冰箱变频控制板”，扫地机器人，吊扇灯控制板，电钻控制板，方案应用分享