androidグラフフレーム1を書く
3266 ワード
前言は2年前、ほとんどがグラフに表示されているアプリを作ったことがありますが、当時は本当に愚かな顔をしていました.探して探して探してMpAndroid Chartというフレームを見つけましたが、このフレームを使って1ヶ月以上の間、Canvasについてゆっくり認識して、Html 5のCanvasに触れて、少し似ているような感じがしました.ある日、私は退屈で、出勤して本当に大丈夫で、私も小さなグラフを書くことができると思います.書いてあるうちに、書けば書くほど多くなることに気づいた.絵は想像以上に複雑ではありません. github.com/huangyanbin…
グラフの基本構造はどのようにグラフを描くか、まずグラフの基本的な属性を理解しなければならない.私たちはこのように描きたいと思っていますか? フレームベースこのグラフを描くと仮定します.まず、一番外側がタイトル、それからLegend(図例)、座標、最後にグラフの内容を分析します.さて、BaseChartの中にどんなメンバーがいるかを考えることができます(タイトル、図例、座標、内容).私たちは新しいBaseChart extends viewを作りました.
グラフのタイトルの描画 onSizeChanged()法によりViewの大きさを得ることができ、BaseChartのRect(0,0,width,height)を得ることができる.クラスBaseChartTitleを新規作成し、4つの定数がTitleの位置を表すように定義します.次にpercentを定義し、タイトルの割合を定義します.set getメソッドを提供します. はタイトルの描画を開始し、まず計算によってstartX、startY、paintによって文字の長さと幅を得た. LeftとRightがタイトルを描くときは縦になるはずなのでcanvas.drawTextOnPathメソッドは、TopとBottomの場合canvasを使用することができる.drawTextメソッド.
転載先:https://juejin.im/post/59e59c51f265da430e4e3a80
グラフの基本構造
グラフのタイトルの描画
int LEFT = 0;
int TOP = 1;
int RIGHT =2;
int BOTTOM = 3; @Override
public void drawTitle(Canvas canvas, Rect rect, Paint paint) {
fontStyle.fillPaint(paint);
String chartName = chartData.getChartName();
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
float textHeight = fontMetrics.descent - fontMetrics.ascent;
int textWidth = (int)paint.measureText(chartName);
int startX,startY;
Path path = new Path();
switch (titleDirection) {
case TOP:
startY = (int) (rect.top + rect.height() * percent/2);
startX = rect.centerX();
startY-= textHeight/2;
startX -=textWidth/2;
canvas.drawText(chartName, startX, startY, paint);
break;
case LEFT:
startX = (int) (rect.left + rect.width() * percent/2);
startX -= textWidth/2;
path.moveTo(startX,rect.top);
path.lineTo(startX,rect.bottom);
canvas.drawTextOnPath(chartName,path,rect.width()/2-textWidth/2,0,paint);
break;
case RIGHT:
startX = (int) (rect.right - rect.width()* percent/2);
startX -= textHeight/2;
path.moveTo(startX,rect.top);
path.lineTo(startX,rect.bottom);
canvas.drawTextOnPath(chartName,path,rect.width()/2-textWidth/2,0,paint);
break;
case BOTTOM:
startY = (int) (rect.bottom - rect.height() * percent/2);
startX = rect.centerX();
startY -= textHeight/2;
startX -=textWidth/2;
canvas.drawText(chartName, startX, startY, paint);
break;
}
}転載先:https://juejin.im/post/59e59c51f265da430e4e3a80