源码 可能不太优雅 但是主要是提供给出大家一点 思路 相信 Android 只有想不到 没有做不到的。

先看一下效果图：

静止

单点触控

多点触控

部分代码：

EnergyItem.java

package com.example.energycurve.ben; /** * 能耗 Bean * @author keven.cheng * EnergyItem { value; String time; EnergyItem() { super(); } public EnergyItem(String date, float value, String time) { super(); this.date = date; this.value = value; this.time = time; } }

/** * 初始化绘制 * * @param canvas * @param paint initDraw(Canvas canvas, Paint paint) { paint.setColor(Color.WHITE); paint.setAntiAlias(true); paint.setStrokeWidth(3); Path path = new Path(); PointF point = null; path.moveTo(SPACING, mGradientHeight + SPACING_HEIGHT); for (int i = 0; i < points.size(); i++) { point = points.get(i); path.lineTo(point.x, point.y - SPACING_HEIGHT); } path.lineTo(point.x, mGradientHeight + SPACING_HEIGHT); path.lineTo(SPACING, mGradientHeight + SPACING_HEIGHT); path.close(); Bitmap btm = Bitmap.createBitmap((int) mGradientWidth, (int) mGradientHeight, Config.ARGB_8888); Bitmap creatBitmap = creatBitmap(paint, path, btm); canvas.drawLine(SPACING, mGradientHeight + SPACING_HEIGHT, mGradientWidth, mGradientHeight + SPACING_HEIGHT, paint); for (int i = 0; i < energyItems.size(); i++) { EnergyItem energy = energyItems.get(i); PointF textPoint = points.get(i); paint.setColor(Color.GRAY); paint.setStrokeWidth(1); // 绘制底部 到上面的线 canvas.drawLine(textPoint.x, mGradientHeight + SPACING_HEIGHT, textPoint.x, SPACING_HEIGHT + WEIGHT + 3, paint); paint.setColor(Color.WHITE); // 绘制底部的 文字 canvas.drawText(energy.date, textPoint.x - 15, mGradientHeight + SPACING_HEIGHT + 20, paint); } Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); PathEffect effects = new DashPathEffect(new float[] { 3, 3, 3, 3 }, 3); mPaint.setStyle(Paint.Style.STROKE); mPaint.setAntiAlias(true); mPaint.setStrokeWidth(1); mPaint.setPathEffect(effects); float dottedSpacing = (mGradientHeight - WEIGHT) / 4; float smallDotted = dottedSpacing / 10; for (int i = 1; i <= 4; i++) { Path dottedPath = new Path(); mPaint.setColor(Color.GRAY); mPaint.setAlpha(0x50); dottedPath.moveTo(SPACING, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i); dottedPath.lineTo(mGradientWidth, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i); canvas.drawPath(dottedPath, mPaint); } digit = ((maxEnergy.value) / 4 + maxEnergy.value) / 4; for (int i = 1; i <= 4; i++) { paint.setStrokeWidth(1); int digitInt = (int) (digit * i + 1.0e-6); canvas.drawText(String.valueOf(digitInt), SPACING - 25, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i + 5, paint); canvas.drawLine(SPACING, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i, SPACING + 10, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i, paint); for (int j = 0; j <= 10; j++) { if (j == 5) { canvas.drawLine(SPACING, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i + smallDotted * j, SPACING + 10, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i + smallDotted * j, paint); } else { canvas.drawLine(SPACING, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i + smallDotted * j, SPACING + 5, mGradientHeight + SPACING_HEIGHT - dottedSpacing * i + smallDotted * j, paint); } } } // 绘制裁剪后的矩阵图 canvas.drawBitmap(creatBitmap, 0, SPACING_HEIGHT, paint); (int i = 0; i < points.size(); i++) { paint.setStrokeWidth(3); PointF startPoint = points.get(i); if (i + 1 == points.size()) { // 绘制最后一个圆点到底部的 竖线 paint.setStrokeWidth(1); canvas.drawLine(startPoint.x, startPoint.y, startPoint.x, mGradientHeight + SPACING_HEIGHT, paint); // 绘制 最后一个圆点 为剪切的图片 canvas.drawBitmap(mLastPoint, startPoint.x - mLastPoint.getWidth() / 2, startPoint.y - mLastPoint.getHeight() / 2, paint); break; } PointF endPoint = points.get(i + 1); // 绘制曲线，并且覆盖剪切后的锯齿 canvas.drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y, paint); // 为了使线条圆滑 绘一个点 每个坐标系 绘制一个圆点 canvas.drawPoint(startPoint.x, startPoint.y, paint); }
// 绘制左边的竖线,以及温度的刻度 （由于需要与顶边 产生间距SPACING_HEIGHT）———— 目前模拟 待修改
  canvas.drawLine(SPACING, SPACING_HEIGHT, SPACING, mGradientHeight
    + SPACING_HEIGHT, paint);
  // 绘制右边的 字（时、天、月）通过Type来进行修改———— 目前模拟 待修改
  paint.setTextSize(16);
  canvas.drawText("天", mGradientWidth + 5, mGradientHeight
    + SPACING_HEIGHT + 5, paint);
  canvas.drawText("度", SPACING - 8, 30, paint);
 }

单点触摸