Android中利用Canvas画简单柱状图

来源：互联网发布：mac唇釉价格forever 编辑：程序博客网时间：2024/05/09 14:40

本人是一个新手，今天第一次写博客，然后突然看到Canvas画图，然后就用几分钟时间写了一个特别垃圾的柱状图，

用到的代码没有一点技术含量，更适合新手看。下面贴代码。

主要代码类，里面包括坐标，柱状图，运用canvas最基本的画图方法

package com.fei.hbkd.canvas;

/**
* Created by jyyrlei on 2016/7/13.
*/

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;

public class CoordinatesView extends View {

    /*
     * 自定义控件一般写两个构造方法 CoordinatesView(Context context)用于java硬编码创建控件
     * 如果想要让自己的控件能够通过xml来产生就必须有第2个构造方法 CoordinatesView(Context context,
     * AttributeSet attrs) 因为框架会自动调用具有AttributeSet参数的这个构造方法来创建继承自View的控件
     */
    public CoordinatesView(Context context) {
        super(context, null);
    }

    public CoordinatesView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /*
     * 圆心（坐标值是相对与控件的左上角的）
     */
    Point po = new Point();
    /*
     * 控件的中心点
     */
    int centerX, centerY;

    /*
     * 控件创建完成之后，在显示之前都会调用这个方法，此时可以获取控件的大小并得到中心坐标和坐标轴圆心所在的点。
     */
    @Override
    public void onSizeChanged(int w, int h, int oldw, int oldh) {
        centerX = w / 2;
        centerY = h / 2;
        po.set(centerX, centerY);
        super.onSizeChanged(w, h, oldw, oldh);
    }

    /*
     * 自定义控件一般都会重载onDraw(Canvas canvas)方法，来绘制自己想要的图形
     */
    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);//设置画笔颜色
        paint.setStrokeWidth((float) 6.0);//画笔粗细程度
        paint.setAntiAlias(true);// 设置画笔的锯齿效果
        paint.setTextSize(30);

        Paint paint1 = new Paint();
        paint1.setColor(Color.GREEN);
        paint1.setAntiAlias(true);// 设置画笔的锯齿效果

        Paint paint2 = new Paint();
        paint2.setColor(Color.BLUE);
        paint2.setTextSize(30);
        paint2.setAntiAlias(true);// 设置画笔的锯齿效果

        // 画坐标轴
        if (canvas != null) {
            canvas.drawColor(Color.WHITE);
            // 画直线
            canvas.drawLine(0, 5 * centerY / 3, 2 * centerX, 5 * centerY / 3, paint);//绘制x轴

            canvas.drawLine(centerX / 4, 0, centerX / 4, 2 * centerY, paint);//绘制y轴

            // 画X轴箭头
            int x = 2 * centerX, y = 5 * centerY / 3;//与x轴坐标第二个点的坐标一样
            drawTriangle(canvas, new Point(x, y), new Point(x - 10, y - 5),
                    new Point(x - 10, y + 5));
            canvas.drawText("城市", x - 60, y + 36, paint);
            // 画Y轴箭头
            x = centerX/4 ;//与y轴第一个点坐标一样
            y = 0;
            drawTriangle(canvas, new Point(x, y), new Point(x - 5, y + 10),
                    new Point(x + 5, y + 10));
            canvas.drawText("收入", x - 60, y + 30, paint);
            // 画中心点坐标
            // 先计算出来当前中心点坐标的值
            // 然后显示坐标
            canvas.drawText("0", (centerX / 4) - 20, (5 * centerY / 3) + 30, paint);//原点坐标0
            canvas.drawText("100", (centerX / 4) - 70, (5 * centerY / 3) - 92, paint);
            canvas.drawText("200", (centerX / 4) - 70, (5 * centerY / 3) - 214, paint);
            canvas.drawText("300", (centerX / 4) - 70, (5 * centerY / 3) - 336, paint);
            canvas.drawText("400", (centerX / 4) - 70, (5 * centerY / 3) - 458, paint);
            canvas.drawText("500", (centerX / 4) - 70, (5 * centerY / 3) - 580, paint);
            canvas.drawText("600", (centerX / 4) - 70, (5 * centerY / 3) - 702, paint);
            canvas.drawText("700", (centerX / 4) - 70, (5 * centerY / 3) - 824, paint);

        }

        if (canvas != null) {

            /*
             * TODO 画数据所有外部需要在坐标轴上画的数据，都在这里进行绘制
             */

            canvas.drawText("石家庄", ((centerX / 4) - 20) + 30, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("保定", ((centerX / 4) - 20) + 130, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("张家口", ((centerX / 4) - 20) + 205, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("邢台", ((centerX / 4) - 20) + 305, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("邯郸", ((centerX / 4) - 20) + 380, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("秦皇岛", ((centerX / 4) - 20) + 455, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("唐山", ((centerX / 4) - 20) + 555, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("廊坊", ((centerX / 4) - 20) + 630, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("承德", ((centerX / 4) - 20) + 705, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("沧州", ((centerX / 4) - 20) + 780, (5 * centerY / 3) + 35, paint2);
            canvas.drawText("衡水", ((centerX / 4) - 20) + 850, (5 * centerY / 3) + 35, paint2);

            canvas.drawRect(150,//起始端点的X坐标；向左扩展
                    1000,//起始端点的Y坐标；向上扩展
                    200,//终止端点的X坐标；向右
                    400,// 终止端点的Y坐标；向下
                    paint1);//绘制直线所使用的画笔
            canvas.drawRect(240, 1000, 290, 500, paint1);
            canvas.drawRect(325, 1000, 375, 475, paint1);
            canvas.drawRect(415, 1000, 465, 750, paint1);
            canvas.drawRect(500, 1000, 550, 600, paint1);
            canvas.drawRect(585, 1000, 635, 675, paint1);
            canvas.drawRect(670, 1000, 720, 426, paint1);
            canvas.drawRect(750, 1000, 800, 382, paint1);
            canvas.drawRect(830, 1000, 880, 670, paint1);
            canvas.drawRect(905, 1000, 955, 845, paint1);
            canvas.drawRect(980, 1000, 1030, 300, paint1);

        }

    }

    /**
     * 画三角形用于画坐标轴的箭头
     */
    private void drawTriangle(Canvas canvas, Point p1, Point p2, Point p3) {
        Path path = new Path();
        path.moveTo(p1.x, p1.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);
        path.close();

        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.FILL);
        // 绘制这个多边形
        canvas.drawPath(path, paint);
    }

    /* canvas.drawText("画三角形：", 10, 200, p);
    // 绘制这个三角形,你可以绘制任意多边形
    Path path = new Path();
    path.moveTo(80, 200);// 此点为多边形的起点
    path.lineTo(120, 250);
    path.lineTo(80, 250);
    path.close(); // 使这些点构成封闭的多边形
    canvas.drawPath(path, p); */

}

package com.fei.hbkd.canvas;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

/**
* Created by jyyrlei on 2016/7/13.
*/
public class TestCoordinates extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.coordinates);

    }

}

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.fei.hbkd.canvas.CoordinatesView
        android:id="@+id/bar_chart"
        android:layout_width="fill_parent"
        android:layout_height="400dp" />

</LinearLayout>

写的不好请多包涵。

0 0