android smooth-line-chart 贝塞尔曲线入门

与绘制折线图不同，smooth-line-chart能根据两点绘制平滑的曲线，使用的是贝赛尔曲线的原理。项目比较简单，但是如果你还不知道贝塞尔曲线如何绘制的话可以学习一下

 https://github.com/PaoloConte/smooth-line-chart

mPath.cubicTo(x1, y1, x2, y2, x3, y3) (x1,y1) 为控制点，(x2,y2)为控制点，(x3,y3) 为结束点。

那么，cubicTo 和 quadTo 有什么不一样呢？

官方是这么说的：

Same as cubicTo, but the coordinates are considered relative to the current point on this contour.

说白了，就是多了一个控制点而已。

然后，我们想绘制和上一个一样的曲线，应该怎么写呢？

<code style="font-size: 1em; font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; padding: 0px; color: inherit; background-color: transparent; white-space: inherit;">mPath.moveTo(100, 500);
mPath.cubicTo(100, 500, 300, 100, 600, 500);
</code>

看看效果：

public class SmoothLineChartEquallySpaced extends View {
	
	private static final int CHART_COLOR = 0xFF0099CC;
	private static final int CIRCLE_SIZE = 8;
	private static final int STROKE_SIZE = 2;	
	private static final float SMOOTHNESS = 0.35f; // the higher the smoother, but don't go over 0.5
	
	private final Paint mPaint;
	private final Path mPath;
	private final float mCircleSize;
	private final float mStrokeSize;
	private final float mBorder;
	
	private float[] mValues;
	private float mMinY;
	private float mMaxY;
	

	public SmoothLineChartEquallySpaced(Context context) {
		this(context, null, 0);
	}

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

	public SmoothLineChartEquallySpaced(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		float scale = context.getResources().getDisplayMetrics().density;
		
		mCircleSize = scale * CIRCLE_SIZE;
		mStrokeSize = scale * STROKE_SIZE;
		mBorder = mCircleSize;
		
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setStrokeWidth(mStrokeSize);
		
		mPath = new Path();
	}
	
	public void setData(float[] values) {
		mValues = values;		
		
		if (values != null && values.length > 0) {
			mMaxY = values[0];
			//mMinY = values[0].y;
			for (float y : values) {
				if (y > mMaxY) 
					mMaxY = y;
				/*if (y < mMinY)
					mMinY = y;*/
			}
		}
				
		invalidate();
	}
	
	public void draw(Canvas canvas) {
		super.draw(canvas);
		
		if (mValues == null || mValues.length == 0)
			return;

		int size = mValues.length;
		
		final float height = getMeasuredHeight() - 2*mBorder;	
		final float width = getMeasuredWidth() - 2*mBorder;
		
		final float dX = mValues.length > 1 ? mValues.length-1  : (2);	
		final float dY = (mMaxY-mMinY) > 0 ? (mMaxY-mMinY) : (2);
				
		mPath.reset();
				
		// calculate point coordinates
		List<PointF> points = new ArrayList<PointF>(size);		
		for (int i=0; i<size; i++) {
			float x = mBorder + i*width/dX;
			float y = mBorder + height - (mValues[i]-mMinY)*height/dY; 
			points.add(new PointF(x,y));		
		}

		// calculate smooth path
		float lX = 0, lY = 0;
		mPath.moveTo(points.get(0).x, points.get(0).y);
		for (int i=1; i<size; i++) {	
			PointF p = points.get(i);	// current point
			
			// first control point
			PointF p0 = points.get(i-1);	// previous point
			float x1 = p0.x + lX; 	
			float y1 = p0.y + lY;
	
			// second control point
			PointF p1 = points.get(i+1 < size ? i+1 : i);	// next point
			lX = (p1.x-p0.x)/2*SMOOTHNESS;		// (lX,lY) is the slope of the reference line 
			lY = (p1.y-p0.y)/2*SMOOTHNESS;
			float x2 = p.x - lX;	
			float y2 = p.y - lY;

			// add line
			mPath.cubicTo(x1,y1,x2, y2, p.x, p.y);		
		}
		

		// 绘制曲线
		mPaint.setColor(CHART_COLOR);
		mPaint.setStyle(Style.STROKE);
		canvas.drawPath(mPath, mPaint);
		
		// 绘制浅蓝色北京
		if (size > 0) {
			mPaint.setStyle(Style.FILL);
			mPaint.setColor((CHART_COLOR & 0xFFFFFF) | 0x10000000);
			mPath.lineTo(points.get(size-1).x, height+mBorder);	
			mPath.lineTo(points.get(0).x, height+mBorder);	
			mPath.close();
			canvas.drawPath(mPath, mPaint);
		}

		// draw circles
		mPaint.setColor(CHART_COLOR);
		mPaint.setStyle(Style.FILL_AND_STROKE);//mPaint.setStyle(Style.STROKE);建议使用STROKE
		for (PointF point : points) {
			canvas.drawCircle(point.x, point.y, mCircleSize/2, mPaint);
		}
		mPaint.setStyle(Style.FILL);
		mPaint.setColor(Color.WHITE);
		for (PointF point : points) {
			canvas.drawCircle(point.x, point.y, (mCircleSize-mStrokeSize)/2, mPaint);
		}
		
	}
}