与绘制折线图不同,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);
}
}
}