Android使用cavans绘制饼图

最新推荐文章于 2022-12-28 17:51:34 发布
最新推荐文章于 2022-12-28 17:51:34 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： android路 文章标签： canvas android 饼图 圆弧绘制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_zT_T/article/details/58588011
版权

项目中需要实现一个一级佣金以及二级佣金的比例示意图。看下设计稿
这里写图片描述

一、分析

一开始分析的是，先绘制完圆环，然后再去找到各自圆环的中心点，进行做切线，做中垂线出来绘制折线，然后绘制佣金比例以及显示。后面发现这么计算太麻烦了。索性就定死那个两个折线图以及比例显示。大概的思路如下图。会进行一系列简化。

这里写图片描述

1、简化点，把折线显示部分设置成了固定，然后圆环在动。
2、因为我们使用canvas绘制圆环或者圆的时候，其实是在一个矩形区域中绘制的，所以我们简化了折线那一部分，就是圆距离矩形左下（右上）角的距离，然后水平方向就是raduis的长度,半径长度。
3、可以看到设计稿纸上我们有一个圆弧之间的一个间距，与底色相同颜色为了区分两个圆环。这里可以采用绘制完圆环后在上层重新绘制那调白线，那就需要计算各点坐标绘制两条折线，我后面一想，还可以采用在同一个rectf区域中覆盖一个相同半径的空心圆环，ok，顿时没有了难点有木有。实心嵌套空心圆环实现两个圆环之间的

4、看下我实现的最终效果图

这里写图片描述

二、计算各点坐标
注意，我们的坐标是重左上角开始的。。。往下或者往右走
这里再继续解释下，绘制圆弧的角度问题吧（顺时针旋转）如下图

这里写图片描述

看下绘制圆弧需要传入的参数 
drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
            @NonNull Paint paint)
oval圆弧切过的矩形区域
startAngle开始角度
sweepAngle扫过的角度（需要绘制的角度）
useCenter是否要连着圆心绘制
paint画笔
圆心坐标（2mRaduis,2mRaduis）
矩形区域RectF坐标（mRaduis, mRaduis, mRaduis * 3, mRaduis * 3）
左下角圆弧起始角度，扫过角度(第一佣金比例)
startAngle=135 - (mFirstPoint / 100 * 360) / 2
sweepAngle=(mFirstPoint / 100 * 360)

右上角圆弧起始角度，扫过角度（第二佣金比例）

startAngle=315 - (360 - mFirstPoint / 100 * 360) / 2
sweepAngle=(360 - mFirstPoint / 100 * 360)

左下角折线

 canvas.drawLine((float) (1 - Math.sqrt(2) / 2) * mRaduis + mRaduis, (float) (1 + Math.sqrt(2) / 2) * mRaduis + mRaduis, mRaduis, 3 * mRaduis, mTextPaint);
canvas.drawLine(mRaduis, 2 * mRaduis + mRaduis, 0, 3 * mRaduis, mTextPaint);

右下角折线
 canvas.drawLine((float) (2 + Math.sqrt(2) / 2) * mRaduis, (float) (2 * mRaduis - Math.sqrt(2) / 2 * mRaduis), 3 * mRaduis, mRaduis, mTextPaint);
 canvas.drawLine(3 * mRaduis, mRaduis, 4 * mRaduis, mRaduis, mTextPaint);

三、实现功能代码

1、attr文件中的自定义属性

 <!--圆环饼图-->
    <declare-styleable name="CircleChart">
        <attr name="mRaduis" format="dimension" />
        <attr name="mFirstPoint" format="float" />
        <attr name="mLinewith" format="dimension" />
        <attr name="mLineColor" format="color" />
        <attr name="mFirstPointColor" format="color" />
        <attr name="mSecondPointColor" format="color" />
        <attr name="mPointTextsize" format="dimension" />
        <attr name="mStokeColor" format="color" />
        <attr name="mTextColor" format="color" />
    </declare-styleable>

2、自定义饼图控件：CircleChart.java

package com.xx.xx.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.TextView;

import com.coofond.carservices.R;

/**
 * @description: 我的分享饼图
 * @Author zsj on 2017/2/21 15:24.
 */

public class CircleChart extends TextView {
    /**
     * 饼图半径
     */
    private int mRaduis;
    /**
     * 一级佣金颜色
     */
    private int mFirstPointColor;
    /**
     * 二级佣金颜色
     */
    private int mSecondPointColor;

    /**
     * 第一佣金比例
     */
    private float mFirstPoint;
    /**
     * 饼图上的字体大小
     */
    private int mPointTextSize;
    /**
     * 线条宽度
     */
    private int mLineWith;
    /**
     * 线条颜色
     */
    private int mLineColor;
    /**
     * 填充的画笔
     */
    private Paint mPaint;

    /**
     * 用来描边的画笔
     */
    private Paint mStokePaint;
    /**
     * 描边颜色
     */
    private int mStokeColor;
    /**
     * 绘制文字的画笔
     */
    private Paint mTextPaint;
    /**
     * 绘制文字的颜色
     */
    private int mTextColor;

    /**
     * @param mFirstPoint 设置第一佣金比例
     */
    public void setmFirstPoint(float mFirstPoint) {
        this.mFirstPoint = mFirstPoint;
    }



    public CircleChart(Context context) {
        this(context, null);
    }

    public CircleChart(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleChart(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        /**
         * 获取我们的自定义属性
         */
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleChart, defStyleAttr, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.CircleChart_mRaduis:
                    mRaduis = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CircleChart_mFirstPoint:
                    mFirstPoint = a.getFloat(attr, 50);
                    break;
                case R.styleable.CircleChart_mLinewith:
                    mLineWith = a.getDimensionPixelOffset(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_DIP, 1, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CircleChart_mLineColor:
                    mLineColor = a.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.CircleChart_mFirstPointColor:
                    mFirstPointColor = a.getColor(attr, Color.BLUE);
                    break;
                case R.styleable.CircleChart_mSecondPointColor:
                    mSecondPointColor = a.getColor(attr, Color.RED);
                    break;
                case R.styleable.CircleChart_mPointTextsize:
                    mPointTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 12, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CircleChart_mStokeColor:
                    mStokeColor = a.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.CircleChart_mTextColor:
                    mTextColor = a.getColor(attr, Color.BLACK);
                    break;
            }
        }
        a.recycle();
        //初始化paint
        mPaint = new Paint();
        mStokePaint = new Paint();
        mTextPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setAntiAlias(true);//消除锯齿
        mStokePaint.setAntiAlias(true);//消除锯齿
        mTextPaint.setAntiAlias(true);//消除锯齿
        mStokePaint.setStyle(Paint.Style.STROKE);
        mStokePaint.setStrokeWidth(mLineWith / 2);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mFirstPointColor);
        mStokePaint.setColor(mStokeColor);
        RectF oval = new RectF(mRaduis, mRaduis, mRaduis * 3, mRaduis * 3);
        //绘制实心圆弧
        canvas.drawArc(oval, 135 - (mFirstPoint / 100 * 360) / 2, (mFirstPoint / 100 * 360), true, mPaint);
        //绘制与底色相同的圆环
        canvas.drawArc(oval, 135 - (mFirstPoint / 100 * 360) / 2, (mFirstPoint / 100 * 360), true, mStokePaint);
        mPaint.setColor(mSecondPointColor);
        //绘制实心圆弧
        canvas.drawArc(oval, 315 - (360 - mFirstPoint / 100 * 360) / 2, (360 - mFirstPoint / 100 * 360), true, mPaint);
        //绘制与底色相同的圆环
        canvas.drawArc(oval, 315 - (360 - mFirstPoint / 100 * 360) / 2, (360 - mFirstPoint / 100 * 360), true, mStokePaint);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setStrokeWidth(1);
        //绘制折线
        canvas.drawLine((float) (1 - Math.sqrt(2) / 2) * mRaduis + mRaduis, (float) (1 + Math.sqrt(2) / 2) * mRaduis + mRaduis, mRaduis, 3 * mRaduis, mTextPaint);
        canvas.drawLine(mRaduis, 2 * mRaduis + mRaduis, 0, 3 * mRaduis, mTextPaint);
        canvas.drawLine((float) (2 + Math.sqrt(2) / 2) * mRaduis, (float) (2 * mRaduis - Math.sqrt(2) / 2 * mRaduis), 3 * mRaduis, mRaduis, mTextPaint);
        canvas.drawLine(3 * mRaduis, mRaduis, 4 * mRaduis, mRaduis, mTextPaint);
        //绘制文字
        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextSize(mPointTextSize);
        canvas.drawText("一级佣金", 0, 3 * mRaduis - mRaduis / 20, mTextPaint);
        canvas.drawText("二级佣金", 4 * mRaduis - mTextPaint.measureText("二级佣金"), mRaduis - mRaduis / 20, mTextPaint);
        mTextPaint.setColor(mFirstPointColor);
        canvas.drawText((int) mFirstPoint + "%", 0, 3 * mRaduis + mRaduis / 20 + mPointTextSize, mTextPaint);
        mTextPaint.setColor(mSecondPointColor);
        canvas.drawText((int) (100 - mFirstPoint) + "%", 4 * mRaduis - mTextPaint.measureText("75%"), mRaduis + mRaduis / 20 + mPointTextSize, mTextPaint);
    }

}

3、xml文件引用

 <com.xx.xx.widget.CircleChart
        android:id="@+id/cir_point"
        android:layout_width="240dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginBottom="20px"
        android:layout_marginTop="-80px"
        app:mFirstPoint="10"
        app:mFirstPointColor="@color/textorange"
        app:mLinewith="5dp"
        app:mPointTextsize="14sp"
        app:mRaduis="60dp"
        app:mSecondPointColor="@color/orange"
        app:mStokeColor="@color/activitycolor"
        app:mTextColor="@color/textcolordark" />

4、activity中调用

cirPoint.setmFirstPoint(60);//获取这个控件直接set...就这么简单

源代码：https://github.com/TrebleZ/circletest

CSDN下载地址：http://download.csdn.net/detail/z_zt_t/9766113

trebleZ
关注
专栏目录
canvas绘制饼状图
Chad97的博客
11-02 787
话不多说直接上代码 &lt;canvas width="600" height="400"&gt;&lt;/canvas&gt; &lt;script&gt; var PieChart = function (ctx) { /*绘制工具*/ this.ctx = ctx || document.querySelector('canvas').getConte...
用canvas绘制一个饼状图
Rampage_w的博客
09-12 679
Canvas，网页原来是可以画出来的… 认识Canvas Canvas绘制矩形 Canvas绘制圆形 使用moveTo()和lineTo()绘制路径 Canvas绘制一个饼状图 认识Canvas HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务。 getContext() 方法可返...
Android 使用Canvas绘制饼图
StoneHui
01-18 2433
效果： 嗯，一个很简单的饼图绘制。用法 可以在xml文件中配置，也可以直接new一个实例出来。
android 画饼图 Canvas drawArc
JY_Sharer的专栏
10-28 7463
在android上，展示可用空间和已用空间形象的展示时，用到饼图。 原理其实就是一个圆，然后分成不同的颜色块。如下图： 这里用到了一个方法， android.graphics.Canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) a
Android Canvas练习(2)自已绘饼图(Pie Chart)
热门推荐
拙言的专栏
04-07 1万+
上文弄了个绘制报表的，有了报表，当然想一并也绘个饼图，柱形图之类的玩玩，看看了API，觉得应当很简单，饼图实现了下， 实现代码确实也很简单，Android的这些函数封装的确实好用。          效果图如下:               不过实现过程还是比较曲折的，首先碰到一个sdk的bug,drawTextOnPath()用法明明是对的，但老是不显示没效果，后面 才查到，这个
Android Canvas练习(9)自已绘分割突出效果的饼图(Pie Chart)
拙言的专栏
04-13 4746
这里画了个饼图的变种，具有分割突出效果的饼图(Pie Chart)，就是个切蛋糕效果的饼图，画这种图，其技巧就在于圆心的偏移。 在圆心偏移，半径不变的基础上，效果就出来了。     上图:               怎么样，效果还是有模有样的吧。      代码很简单，附上:       package com.xcl.chart; /** * Canvas练习 *
用canvas绘制饼图
12-15
主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用 context.arc与lineto两个API。 实现的功能有： 1. 支持标签Legend显示或者隐藏 2. 首次载入动画效果 3. 鼠标tooltip效果 4. 自定义饼图大小与...
cavans绘制带有＜img＞标签的页面出现跨域错误
weixin_40576390的博客
09-28 351
错误信息: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 错误分析: 典型的跨域问题,因为页面img引入的图片不在本服务器上,所以canvans插件绘制图片的方法(toDataURL)被禁止,具体绘制步骤可参考--https://blog.csdn.net/weixin_40576390/article/details/106711193 解决办法: 第一种情况,我们项目用了n
android使canvas画动态,Android中使用SurfaceView和Canvas来绘制动画
weixin_42134054的博客
05-25 1136
事实上每一个View中都有Canvas能够用来绘制动画。仅仅须要在这个View中重载onDraw()方法就能够，可是SurfaceView类是一个专门用来制动动画的类。Canvas(中文叫做"画布")就和HTML5中的canvas标签一样能够在一定区域内自由绘制图形。Canvas+SurfaceView制作的动画与View Animation和Property Animation这类动画比起来更加...
Android使用canvas绘制视力表E标
情怀中的释然~
04-03 1386
展示视力表中带有方向的E标 返回drawable可以直接展示在view之上 /** * 使用canvas画出E标 * * @param direction * @return */ public static Drawable drawEWithCanvas(int direction) { int width = ConvertUtils.dp2px(80); in...
Android简单绘制饼状图
08-17
简单饼状图,简单的
android自定义view－特殊饼形图(环形图)
09-07
一个特殊的饼形图
Android 饼状统计图view,Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】...
weixin_42470300的博客
05-27 267
本文实例讲述了Android编程实现canvas绘制饼状统计图功能。分享给大家供大家参考，具体如下：本例的目的是实现一个简单的饼状统计图，效果如下：特点：1.使用非常方便，可放在xml布局文件中，然后在代码中设置内容，即：PieChartView pieChartView = (PieChartView) findViewById(R.id.pie_chart);PieChartView.Pi...
Android画饼状图代码,Android绘制简单饼状图
weixin_34207880的博客
05-26 415
原项目地址：https://github.com/limccn/Android-Charts因为在项目中需要用到绘制饼状图，所以对github下的android-charts库进行了精简和修改，貌似该库本身有些bug，例如文字绘制有时候会错位，我改了一些地方，有兴趣的可以将下面所有代码复制进自己项目中，使用方法如下：mData[0] = new ArrayList();for(int i=0; i...
Canvas学习，实用canvas绘制饼状图
qq_45263880的博客
05-25 1149
使用canvas绘制饼状图
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景)
一起coding，一起嗨。
08-05 1381
代码】cavans图形绘制。
Android canvas
zenmela2011的专栏
03-13 1万+
1.Canvas Canvas是一个画布，可以在这个画布上进行各种绘图操作。 在Android中，想要获得一个Canvas对象主要有三种方法： ①继承一个View，并重写onDraw()方法。View的Canvas对象会被当做参数传递过来，在这个Canvas上进行的操作会直接反映在View中。 ②调用SurfaceHolder.lockCanvas()返回一个Canvas对象。 ③通过构造方法自己创建一个Canvas对象。 Bitmap bitmap = Bitmap.createBitmap(1
Android自定义View实现饼图
qq_41008818的博客
12-28 417
Android自定义View实现饼图
canvas入门系列之如何画一个饼图
PromiseCao的博客
07-17 626
html &lt;canvas id="c1" width="1000px" height="600px"&gt; &lt;span&gt;不支持canvas浏览器&lt;/span&gt; &lt;/canvas&gt;  js var c1 = document.getElementById('c1'); var context
java中Cavans怎么使用
最新发布
05-02
在 `paint` 方法中，我们先设置了背景颜色，然后使用 `Graphics` 对象绘制了一个圆形和一条直线。最后，我们在 `main` 方法中创建了一个窗口，并将 Canvas 添加到窗口中。 当程序运行时，会在窗口中显示我们绘制的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值