Android 圆环统计图（带外延折线可点击）

需求先看UI效果图吧

看到这肯定去找轮子，找了半天，没找到相似的，大部分搜到的都是点击外凸，而这个UI是内凸，其实外凸内凸区别还不小，没找到一样的，于是乎，和iOS说好了要不就放弃吧，然而第二天，人家夸夸夸撸完了，还是贝塞尔写的，当场晕死，我是真看不懂那公式，然后不甘心，拼命的改别人的轮子，就算不用贝塞尔，也得搞出来啊，于是乎，套两个圆环不就好了，于是，开始下手干活，下面贴出来iOS和Android的效果，左iOS右Android

虽然没有人家漂亮，但是基本也实现了，代码贴在下面了

辅助工具类GeomTool.class

import android.graphics.Point;
import android.graphics.RectF;/*** 与2D屏幕有关的计算，屏幕约定为X轴向右，Y轴向下，顺时针角度增加。* Created by hxw on 2016/8/25.*/
public  class GeomTool {/*** 这个方法放在这里展示了原始的计算过程** @see #calcCirclePoint*/@Deprecatedprivate static Point calcCirclePoint2(int angle, float radius, float cx, float cy,Point resultOut) {if (resultOut == null) {resultOut = new Point();}// 将angle控制在0-360，注意这里的angle是从X正轴顺时针增加。而sin,cos等的计算是X正轴开始逆时针增加angle = clampAngle(angle);double radians = angle / 180f * Math.PI;double sin = Math.sin(radians);double cos = Math.cos(radians);double x = 0, y = 0;if (angle == 0 || angle == 360) {// sin：0 cos: 1x = cx + radius;y = cy;} else if (angle > 0 && angle < 90) {// sin：0~1 cos: 1~0double dy = radius * sin;double dx = radius * cos;x = cx + dx;y = cy + dy;} else if (angle == 90) {// sin：1 cos: 0x = cx;y = cy + radius;} else if (angle > 90 && angle < 180) {// sin：1~0 cos: 0~-1double dy = radius * sin;double dx = radius * cos;x = cx + dx;y = cy + dy;} else if (angle == 180) {// sin：0 cos: -1x = cx - radius;y = cy;} else if (angle > 180 && angle < 270) {// sin：0~-1 cos: -1~0double dy = radius * sin;double dx = radius * cos;x = cx + dx;y = cy + dy;}  else if (angle == 270) {// sin：-1 cos: 0x = cx;y = cy - radius;} else if (angle > 270 && angle < 360) {// sin：-1~0 cos: 0~1double dy = radius * sin;double dx = radius * cos;x = cx + dx;y = cy + dy;}resultOut.set((int) x, (int) y);return resultOut;}/*** 计算指定角度、圆心、半径时，对应圆周上的点。* @param angle 角度，0-360度，X正轴开始，顺时针增加。* @param radius 圆的半径* @param cx 圆心X* @param cy 圆心Y* @param resultOut 计算的结果(x, y) ，方便对象的重用。* @return resultOut, or new Point if resultOut is null.*/public static Point calcCirclePoint(int angle, float radius, float cx, float cy, Point resultOut) {if (resultOut == null) resultOut = new Point();// 将angle控制在0-360，注意这里的angle是从X正轴顺时针增加。而sin,cos等的计算是X正轴开始逆时针增加angle = clampAngle(angle);double radians = angle / 180f * Math.PI;double sin = Math.sin(radians);double cos = Math.cos(radians);double dy = radius * sin;double dx = radius * cos;double x = cx + dx;double y = cy + dy;resultOut.set((int) x, (int) y);return resultOut;}/*** 计算坐标(x, y)到圆心(cx, cy)形成的角度，角度从0-360，360度就是0度，顺时针增加* （x轴向右，y轴向下）若2点重合返回-1;*/public static int calcAngle(float x, float y, float cx, float cy) {double resultDegree = 0;double vectorX = x - cx; // 点到圆心的X轴向量，X轴向右，向量为(0, vectorX)double vectorY = cy - y; // 点到圆心的Y轴向量，Y轴向上，向量为(0, vectorY)if (vectorX == 0 && vectorY == 0) {// 重合？return -1;}// 点落在X,Y轴的情况这里就排除if (vectorX == 0) {// 点击的点在Y轴上，Y不会为0的if (vectorY > 0) {resultDegree = 90;} else {resultDegree = 270;}} else if (vectorY == 0) {// 点击的点在X轴上，X不会为0的if (vectorX > 0) {resultDegree = 0;} else {resultDegree = 180;}} else {// 根据形成的正切值算角度double tanXY = vectorY / vectorX;double arc = Math.atan(tanXY);// degree是正数，相当于正切在四个象限的角度的绝对值double degree = Math.abs(arc / Math.PI * 180);// 将degree换算为对应x正轴开始的0-360的角度if (vectorY < 0 && vectorX > 0) {// 右下 0-90resultDegree = degree;} else if (vectorY < 0 && vectorX < 0) {// 左下 90-180resultDegree = 180 - degree;} else if (vectorY > 0 && vectorX < 0) {// 左上 180-270resultDegree = 180 + degree;} else {// 右上 270-360resultDegree = 360 - degree;}}return (int) resultDegree;}/*** 计算指定区域中可放置的最大正方形区域。* @param region 指定的区域* @param squareRect 正方形区域，将在原区域中居中* @return squareRect, or new RectF if squareRect is null.*/public static RectF calcMaxSquareRect(RectF region, RectF squareRect) {if (squareRect == null) squareRect = new RectF();if (region == null) return squareRect;float w = region.width();float h = region.height();if (w == h) {squareRect.set(region);} else if (w > h) {float padding = (w - h) / 2;squareRect.set(region);squareRect.inset(padding, 0);} else { // (w < h)float padding = (h - w) / 2;squareRect.set(region);squareRect.inset(0, padding);}return squareRect;}/*** 将角度变换为0-360度。* @param angle 原角度* @return 0-360之间的等效角度*/public static int clampAngle(int angle) {return ((angle % 360) + 360) % 360;}/*** 返回给定值在区间[min, max]上的最近值。*/public static float clamp(float value, float min, float max) {if (min > max) {min = min + max;max = min - max;min = min - max;}if (value < min) {return min;} else if (value > max) {return max;}return value;}/*** 计算点(x1, y1)和(x2, y2)之间的距离。*/public static float calcDistance(float x1, float y1, float x2, float y2) {return (float) Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));}}

自定义View RingView.class


import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.Point;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;import com.dq.demo.R;import java.util.ArrayList;
import java.util.List;public class RingView extends View {private Context mContext;private Paint mPaint;private int mPaintWidth = 0;        // 画笔的宽private int topMargin = 30;         // 上边距private int leftMargin = 80;        // 左边距private Resources mRes;private DisplayMetrics dm;private int showRateSize = 12; // 展示文字的大小private int circleCenterX = 96;     // 圆心点X  要与外圆半径相等private int circleCenterY = 96;     // 圆心点Y  要与外圆半径相等private int ringOuterRidus = 96;     // 外圆的半径private int ringPointRidus = 80;    // 点所在圆的半径private float rate = 0.4f;     //点的外延距离  与  点所在圆半径的长度比率private float extendLineWidth = 80;     //点外延后  折的横线的长度private RectF rectF;                // 外圆所在的矩形private RectF rectFPoint;           // 点所在的矩形private List<Integer> colorList;private List<Float> rateList;private boolean isShowRate;private Float maxTotal = 0F;private String lengthenLineColor = "#3A66AF";private String lengthenTextColor = "#455B72";public RingView(Context context) {super(context, null);}public RingView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);this.mContext = context;initView();}public void setShow(List<Integer> colorList, List<Float> rateList) {setShow(colorList, rateList, false);}public void setShow(List<Integer> colorList, List<Float> rateList, boolean isShowRate) {this.colorList = colorList;this.rateList = rateList;this.isShowRate = isShowRate;angles = new float[rateList.size()];for (int i = 0; i < rateList.size(); i++) {maxTotal += rateList.get(i);}for (int j = 0; j < rateList.size(); j++) {angles[j] = (float) ((rateList.get(j) / maxTotal) * 360f);}}private void initView() {this.mRes = mContext.getResources();this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);dm = new DisplayMetrics();WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);wm.getDefaultDisplay().getMetrics(dm);int screenWidth = wm.getDefaultDisplay().getWidth();leftMargin = (px2dip(screenWidth) - (2 * circleCenterX)) / 2;mPaint.setColor(getResources().getColor(R.color.red));mPaint.setStrokeWidth(dip2px(mPaintWidth));mPaint.setStyle(Paint.Style.FILL);mPaint.setAntiAlias(true);rectF = new RectF(dip2px(mPaintWidth + leftMargin),dip2px(mPaintWidth + topMargin),dip2px(circleCenterX + ringOuterRidus + mPaintWidth * 2 + leftMargin),dip2px(circleCenterY + ringOuterRidus + mPaintWidth * 2 + topMargin));rectFPoint = new RectF(dip2px(mPaintWidth + leftMargin + (ringOuterRidus - ringPointRidus)),dip2px(mPaintWidth + topMargin + (ringOuterRidus - ringPointRidus)),dip2px(circleCenterX + ringPointRidus + mPaintWidth * 2 + leftMargin),dip2px(circleCenterY + ringPointRidus + mPaintWidth * 2 + topMargin));Log.e("矩形点:", dip2px(circleCenterX + ringOuterRidus + mPaintWidth * 2) + " --- " + dip2px(circleCenterY + ringOuterRidus + mPaintWidth * 2));}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);pointList.clear();if (colorList != null) {for (int i = 0; i < colorList.size(); i++) {mPaint.setColor(mRes.getColor(colorList.get(i)));mPaint.setStyle(Paint.Style.FILL);drawOuter(canvas, i);}}if (colorList != null) {for (int i = 0; i < colorList.size(); i++) {drawInouter(canvas, i);}}mPaint.setStyle(Paint.Style.FILL);Paint paint1 = new Paint();paint1.setColor(Color.parseColor("#A7A6FF"));canvas.drawCircle(rectF.centerX(), rectF.centerY(), 150, paint1);}private float preRate;private void drawArcCenterPoint(Canvas canvas, int position) {mPaint.setStyle(Paint.Style.FILL);mPaint.setColor(mRes.getColor(R.color.transparent));mPaint.setStrokeWidth(dip2px(1));canvas.drawArc(rectFPoint, preAngle, (endAngle) / 2, true, mPaint);dealPoint(rectFPoint, preAngle, (endAngle) / 2, pointArcCenterList);Point point = pointArcCenterList.get(position);mPaint.setColor(Color.parseColor(lengthenLineColor));if (position == mCurrentItem) {/*** 折线初始圆点*/canvas.drawCircle(point.x, point.y, dip2px(2), mPaint);}if (preRate / 2 + rateList.get(position) / 2 < 5) {extendLineWidth += 40;rate -= 0.05f;} else {extendLineWidth = 40;rate = 0.4f;}// 外延画折线float lineXPoint1 = (point.x - dip2px(leftMargin + ringOuterRidus)) * (1 + rate);float lineYPoint1 = (point.y - dip2px(topMargin + ringOuterRidus)) * (1 + rate);float[] floats = new float[8];floats[0] = point.x;floats[1] = point.y;floats[2] = dip2px(leftMargin + ringOuterRidus) + lineXPoint1;floats[3] = dip2px(topMargin + ringOuterRidus) + lineYPoint1;floats[4] = dip2px(leftMargin + ringOuterRidus) + lineXPoint1;floats[5] = dip2px(topMargin + ringOuterRidus) + lineYPoint1;if (point.x >= dip2px(leftMargin + ringOuterRidus)) {mPaint.setTextAlign(Paint.Align.LEFT);floats[6] = dip2px(leftMargin + ringOuterRidus) + lineXPoint1 + dip2px(extendLineWidth);} else {mPaint.setTextAlign(Paint.Align.RIGHT);floats[6] = dip2px(leftMargin + ringOuterRidus) + lineXPoint1 - dip2px(extendLineWidth);}floats[7] = dip2px(topMargin + ringOuterRidus) + lineYPoint1;mPaint.setColor(Color.parseColor(lengthenLineColor));if (position == mCurrentItem) {/*** 折线线段*/canvas.drawLines(floats, mPaint);}mPaint.setTextSize(dip2px(showRateSize));mPaint.setStyle(Paint.Style.STROKE);mPaint.setColor(Color.parseColor(lengthenTextColor));if (position == mCurrentItem) {/*** 文字渲染*/if (point.x >= dip2px(leftMargin + ringOuterRidus)) {canvas.drawText(rateList.get(position) + "%", floats[6] - dip2px(extendLineWidth), floats[7] - dip2px(showRateSize) / 3, mPaint);} else {canvas.drawText(rateList.get(position) + "%", floats[6] + dip2px(extendLineWidth), floats[7] - dip2px(showRateSize) / 3, mPaint);}}preRate = rateList.get(position);}List<Point> pointList = new ArrayList<>();List<Point> pointArcCenterList = new ArrayList<>();private void dealPoint(RectF rectF, float startAngle, float endAngle, List<Point> pointList) {Path orbit = new Path();//通过Path类画一个90度（180—270）的内切圆弧路径orbit.addArc(rectF, startAngle, endAngle);PathMeasure measure = new PathMeasure(orbit, false);Log.e("路径的测量长度:", "" + measure.getLength());float[] coords = new float[]{0f, 0f};int divisor = 1;measure.getPosTan(measure.getLength() / divisor, coords, null);Log.e("coords:", "x轴:" + coords[0] + " -- y轴:" + coords[1]);float x = coords[0];float y = coords[1];Point point = new Point(Math.round(x), Math.round(y));pointList.add(point);}private void drawOuter(Canvas canvas, int position) {if (rateList != null) {endAngle = getAngle(rateList.get(position));}canvas.drawArc(rectF, preAngle, endAngle, true, mPaint);if (isShowRate) {/*** 绘制折线外延*/drawArcCenterPoint(canvas, position);}preAngle = preAngle + endAngle;}/*** 绘制内圆环*/private void drawInouter(Canvas canvas, int position) {if (rateList != null) {endAngle = getAngle(rateList.get(position));}Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setColor(getResources().getColor(R.color.white));paint.setStyle(Paint.Style.FILL);RectF rectF1 = new RectF(dip2px(mPaintWidth + 130),                                       //左dip2px(mPaintWidth + 60),                                       //上dip2px(circleCenterX + ringOuterRidus + mPaintWidth * 2 + 70),                    //右dip2px(circleCenterY + ringOuterRidus + mPaintWidth * 2 + 0)); //下if (mCurrentItem != position) {canvas.drawArc(rectF1, preAngle, endAngle, true, paint);}preAngle = preAngle + endAngle;}@Overridepublic boolean onTouchEvent(MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_DOWN) {int item = calcClickItem(event.getX(), event.getY());if (item >= 0 && item < rateList.size()) {setCurrentItem(item);} else {mCurrentItem = -1;invalidate();}}return super.onTouchEvent(event);}private int mCurrentItem = -1;public float[] angles;private void setCurrentItem(int item) {Log.e(RingView.class.getSimpleName(), "Click To Position " + item);if (mCurrentItem != item) {mCurrentItem = item;}invalidate();}private int calcClickItem(float x, float y) {if (rateList == null) return -1;final float centerX = rectF.centerX();final float centerY = rectF.centerY();float outerRadius = rectF.width() / 2;float innerRadius = 80;// 计算点击的坐标(x, y)和圆中心点形成的角度，角度从0-360，顺时针增加int clickedDegree = GeomTool.calcAngle(x, y, centerX, centerY);double clickRadius = GeomTool.calcDistance(x, y, centerX, centerY);if (clickRadius < innerRadius) {// 点击发生在小圆内部，也就是点击到标题区域
//            return -1;} else if (clickRadius > outerRadius) {// 点击发生在大圆环外return -2;}// 计算出来的clickedDegree是整个View原始的，被点击item需要考虑startAngle。int startAngle = -90;int angleStart = startAngle;for (int i = 0; i < angles.length; i++) {int itemStart = (angleStart + 360) % 360;float end = itemStart + angles[i];if (end >= 360f) {if (clickedDegree >= itemStart && clickedDegree < 360) return i;if (clickedDegree >= 0 && clickedDegree < (end - 360)) return i;} else {if (clickedDegree >= itemStart && clickedDegree < end) {return i;}}angleStart += angles[i];}return -3;}private float preAngle = -90;private float endAngle = -90;/*** @param percent 百分比* @return*/private float getAngle(float percent) {float a = 360f / maxTotal * percent;return a;}/*** 根据手机的分辨率从 dp 的单位 转成为 px(像素)*/public int dip2px(float dpValue) {return (int) (dpValue * dm.density + 0.5f);}/*** 根据手机的分辨率从 dp 的单位 转成为 px(像素)*/public int px2dip(float pxValue) {return (int) (pxValue / dm.density + 0.5f);}
}

xml中引入布局

<com.dq.demo.ui.view.RingViewandroid:id="@+id/ringView"android:layout_marginTop="300dp"android:layout_width="wrap_content"android:layout_height="wrap_content" />

activity中使用

RingView ringView = (RingView) mView.findViewById(R.id.ringView);
// 添加的是颜色
List<Integer> colorList = new ArrayList<>();
colorList.add(R.color.color_ff3e60);
colorList.add(R.color.color_ffa200);
colorList.add(R.color.color_31cc64);
colorList.add(R.color.yellow_2);
colorList.add(R.color.grey_600);
colorList.add(R.color.text_top_1);
//  添加的是百分比
List<Float> rateList = new ArrayList<>();
rateList.add(10f);
rateList.add(15f);
rateList.add(25f);
rateList.add(40f);
rateList.add(30f);
rateList.add(28f);
ringView.setShow(colorList, rateList, true);

至此结束！！！
如有更好的方法，欢迎在评论区讨论。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/18496.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2023年大语言模型神器 - LangChain

2023年大语言模型神器 - LangChain

概要 今天介绍一下 LangChain 框架&#xff0c;LangChain 是一个帮助在应用程序中使用大型语言模型&#xff08;LLM&#xff09;的编程框架。它可以将大型语言模型与其他计算或知识来源相结合&#xff0c;从而实现功能更加强大的应用。 最初 LangChain 是一个开源项目&#xf…
阅读更多...
open3d实现搜索在一个球内部的点云

open3d实现搜索在一个球内部的点云

目录 写在前面原理代码结果参考完 写在前面 1、本文内容 给定一个点云P和一个圆心为center&#xff0c;半径为r的球&#xff0c;搜索出P中属于球内的点 2、平台/环境 使用open3d, cmake&#xff0c;适用windows/linux 3、转载请注明出处&#xff1a; https://blog.csdn.net/q…
阅读更多...
【uniapp开发小程序】实现同声传译(长按语音转文字)

【uniapp开发小程序】实现同声传译(长按语音转文字)

效果图&#xff1a; 插件&#xff1a; 采用小程序插件&#xff1a;微信同声传译。插件文档定位 具体步骤&#xff1a; 先登录小程序后台&#xff08;项目别错了&#xff09;&#xff1a;官网传送然后 设置 > 第三方设置 > 添加插件 在插件文档里面拿到Appid和版本号 在…
阅读更多...
14-Vue插槽（slot），制作可复用组件

14-Vue插槽（slot），制作可复用组件

什么是 slot ? Vue 将 <slot>元素作为承载分发内容的出口。插槽内可以包含任何模板代码&#xff0c;包括 HTML或其它组件。 在某些组件的模板中&#xff0c;有一部分区域需要父组件来指定 <!-- message组件&#xff1a;一个弹窗消息 --> <div class"mes…
阅读更多...
组合取球-2022年全国青少年信息素养大赛Python国赛第6题

组合取球-2022年全国青少年信息素养大赛Python国赛第6题

[导读]&#xff1a;超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲&#xff0c;这是超平老师解读Python编程挑战赛真题系列的第8讲。 全国青少年信息素养大赛&#xff08;原全国青少年电子信息智能创新大赛&#xff09;是“世界机器人大会青少年机器人设计…
阅读更多...
安全防御 --- DDOS攻击（01）

安全防御 --- DDOS攻击（01）

DOS攻击&#xff08;deny of service&#xff09;--- 拒绝式服务攻击 例&#xff1a;2016年10月21日&#xff0c;美国提供动态DNS服务的DynDNS遭到DDOS攻击&#xff0c;攻击导致许多使用DynDNS服务的网站遭遇访问问题&#xff0c;此事件中&#xff0c;黑客人就是运用了DNS洪水…
阅读更多...
LinearAlgebraMIT_5_SpacesOfVectors

LinearAlgebraMIT_5_SpacesOfVectors

这一节中我们将学习向量空间。 x.1 转置矩阵和构造对称矩阵 在开启向量空间的学习前我们先复习一下转置矩阵和置换矩阵。我们将矩阵转置前后不变的矩阵称为对称矩阵。而我们如何得到一个对称矩阵呢&#xff0c;我们使用矩阵乘以矩阵的转置便可得到。 x.2 Vectors Space 向量…
阅读更多...
如何执行Photoshop脚本

如何执行Photoshop脚本

环境 Photoshop: CC2017 OS: Windows 10 脚本放置位置 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Presets\Scripts #也就是 PS的安装目录\Presets\Scripts
阅读更多...
探究Vue源码:mustache模板引擎(5) 对比rollup与webpack，在本地搭建webpack环境

探究Vue源码:mustache模板引擎(5) 对比rollup与webpack，在本地搭建webpack环境

好 从本文开始 我们就来手写一下mustache这个库 他是模板引擎的一个祖先 将模板字符串编译成一个dom字符串 就是它的思想&#xff0c;这也是一个具有跨时代意义的思想 这里的话 我们还是搭一个 webpack 的项目环境 这里值得一提的是 mustache 他官方是通过rollup来进行打包的 …
阅读更多...
简述JMeter实现分布式并发及操作

简述JMeter实现分布式并发及操作

为什么要分布式并发&#xff1f; JMeter性能实践过程中&#xff0c;一旦进行高并发操作时就会出现以下尴尬场景&#xff0c;JMeter客户端卡死、请求错误或是超时等&#xff0c;导致很难得出准确的性能测试结论。 目前知道的有两个方法可以解决JMeter支撑高并发&#xff1a; …
阅读更多...
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录

微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录

数据绑定&#xff0c;事件绑定&#xff0c;事件传参与数据同步 1. 数据绑定1.1. 在data中定义数据1.2. 在wxml中渲染数据 &#xff08;mustache语法&#xff09; 2. 事件绑定2.1. 事件2.2. 常用的事件2.3. 事件对象的属性列表2.4. target 和 currentTarget的区别 3. 事件传参与…
阅读更多...
订单结算页+下单业务

订单结算页+下单业务

一、订单结算页 1.业务分析 (1) 获取用户收货地址信息 一般的收货地址都是多个&#xff0c;使用时选中一个&#xff0c;所以收货地址使用List集合封装 (2)获取购物车商品信息 购物车商品也是多个&#xff0c;使用List集合封装 (3)查询商品库存 查询每个商品是否有库存&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023