web 前端绘制折线_web前端开发之路——Android 自定义控件（天气趋势折线图）

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (mElements == null || mElements.size() == 0) {

return;

}

double max_up = getMaxUp();

double min_down = getMinDown();

canvas.setDrawFilter(mDrawFilter);

mPaint.setStrokeWidth(lineWeith);

float width = getWidth();

float grap = width / mElements.size();

float textSize = mTextPaint.getTextSize();

int textMargin = circleRadius * 2;

float margin_top = textSize + 2 * textMargin;

Log.d(TAG, "onDraw: " + margin_top + "|" + textSize);

float height = getHeight() - 2 * margin_top;

for (int i = 0; i < mElements.size() - 1; i++) {

float startX = i * grap + grap / 2;

float stopX = (i + 1) * grap + grap / 2;

float startY = (float) (max_up - mElements.get(i).getUp()) / (float) (max_up -

min_down) * height + margin_top;

float stopY = (float) (max_up - mElements.get(i + 1).getUp()) / (float) (max_up -

min_down) * height + margin_top;

canvas.drawText((int) mElements.get(i).getUp() + "℃", startX - textSize, startY -

textMargin, mTextPaint);

canvas.drawCircle(startX, startY, circleRadius, mPaint);

canvas.drawLine(startX, startY, stopX, stopY, mPaint);

if (i == mElements.size() - 2) {

canvas.drawText((int) mElements.get(i + 1).getUp() + "℃", stopX - textSize, stopY

- textMargin, mTextPaint);

canvas.drawCircle(stopX, stopY, circleRadius, mPaint);

}

startY = (float) (max_up - mElements.get(i).getDown()) / (float) (max_up - min_down) *

height + margin_top;

stopY = (float) (max_up - mElements.get(i + 1).getDown()) / (float) (max_up -

min_down) * height + margin_top;

canvas.drawText((int) mElements.get(i).getDown() + "℃", startX - textSize, startY +

textSize + textMargin, mTextPaint);

canvas.drawCircle(startX, startY, circleRadius, mPaint);

canvas.drawLine(startX, startY, stopX, stopY, mPaint);

if (i == mElements.size() - 2) {

canvas.drawText((int) mElements.get(i + 1).getDown() + "℃", stopX - textSize,

stopY + textSize + textMargin, mTextPaint);

canvas.drawCircle(stopX, stopY, circleRadius, mPaint);

}

}

}