Chart中數(shù)據(jù)的繪制時通過一系列的Renderer類來實(shí)現(xiàn)的黍特,類結(jié)構(gòu)如下:
下面以BarChartRenderer為例講解蛙讥。
1. BarBuffer(防止對象重復(fù)創(chuàng)建)
由于Renderer中方法的執(zhí)行大部分都是在onDraw方法中,為了防止對象的頻繁創(chuàng)建而引起內(nèi)存抖動問題(會造成卡段現(xiàn)象)灭衷,這里使用了Buffer的方式次慢。
BarBuffer中維護(hù)了一個float[],用來存儲所繪制的所有的點(diǎn)信息(Bar就是一個矩形,大小由left翔曲,top迫像,right,bottom四個點(diǎn)所決定)瞳遍,BarBuffer保存了所有數(shù)據(jù)的原始value值闻妓,當(dāng)我們縮放或者平移之后,會遍歷buffer中的每一個數(shù)據(jù)掠械,先判斷這個數(shù)據(jù)是否在可見范圍內(nèi)才繪制由缆,這樣至始至終,無論是動畫還是縮放或者是拖拽份蝴,我們都是從buffer中取數(shù)據(jù)犁功,然后根據(jù)Utils中的matrix的信息映射出px值進(jìn)行繪制氓轰,防止每次繪制都要重新創(chuàng)建一系列的點(diǎn)婚夫。
先來看一下BarBuffer中的主要字段:
/** float-buffer that holds the data points to draw, order: x,y,x,y,... */
public final float[] buffer;
//設(shè)置為1每一個bar會充滿它所在的x-index組,如果設(shè)置為0.9署鸡,相鄰兩個bar之間就會有一個0.1的間隔
protected float mBarWidth = 1f;
BarBuffer中最重要的一個方法是feed(IBarDataSet data)案糙,它會遍歷傳入的BarDataSet中所有的BarEntry限嫌,根據(jù)BarEntry的x,y生成當(dāng)前bar的left时捌,top怒医,right,bottom奢讨,然后存如buffer中:
@Override
public void feed(IBarDataSet data) {
//phaseX 是x軸動畫的進(jìn)度稚叹,可以先認(rèn)為是1
float size = data.getEntryCount() * phaseX;
//1.根據(jù)mBarWidth計(jì)算出bar的一半寬度,注意此時是百分比值
float barWidthHalf = mBarWidth / 2f;
for (int i = 0; i < size; i++) {
BarEntry e = data.getEntryForIndex(i);
if(e == null)
continue;
float x = e.getX();
float y = e.getY();
float[] vals = e.getYVals();
//非堆疊圖
if (!mContainsStacks || vals == null) {
//2.以barEntry的x為中心點(diǎn)拿诸,計(jì)算出left扒袖,top,right亩码,bottom
float left = x - barWidthHalf;
float right = x + barWidthHalf;
float bottom, top;
if (mInverted) {
bottom = y >= 0 ? y : 0;
top = y <= 0 ? y : 0;
} else {
top = y >= 0 ? y : 0;
bottom = y <= 0 ? y : 0;
}
// multiply the height of the rect with the phase
if (top > 0)
top *= phaseY;
else
bottom *= phaseY;
//3.添加到buffer中
addBar(left, top, right, bottom);
} else {//堆疊圖
...
}
}
//重置index
reset();
}
2.BarBuffer的初始化
在BarLineChartBase的中會調(diào)用Renderer的initBuffers()方法
@Override
public void notifyDataSetChanged() {
...
if (mRenderer != null)
mRenderer.initBuffers();
...
}
@Override
public void initBuffers() {
BarData barData = mChart.getBarData();
mBarBuffers = new BarBuffer[barData.getDataSetCount()];
for (int i = 0; i < mBarBuffers.length; i++) {
IBarDataSet set = barData.getDataSetByIndex(i);
mBarBuffers[i] = new BarBuffer(set.getEntryCount() * 4 * (set.isStacked() ? set.getStackSize() : 1),
barData.getDataSetCount(), set.isStacked());
}
}
上面的代碼只是初始化了Barbuffer中長度季率,向其填充內(nèi)容實(shí)在繪制每一個DataSet中進(jìn)行的。
protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) {
Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
float phaseX = mAnimator.getPhaseX();
float phaseY = mAnimator.getPhaseY();
...
BarBuffer buffer = mBarBuffers[index];
buffer.setPhases(phaseX, phaseY);
buffer.setDataSet(index);
buffer.setInverted(mChart.isInverted(dataSet.getAxisDependency()));
buffer.setBarWidth(mChart.getBarData().getBarWidth());
//調(diào)用feed方法描沟,填充一系列的point
buffer.feed(dataSet);
//上面的buffer只是原始值value飒泻,需要通過Transformer映射成px值
trans.pointValuesToPixel(buffer.buffer);
...
}
通過上面的操作,Barbuffer中就填充好了所有要繪制的數(shù)據(jù)(px值)吏廉,剩下的就是遍歷這個buffer泞遗,四個點(diǎn)為一組繪制矩形了。
下面來看一下具體的繪制過程席覆。
3.具體繪制流程
首先會遍歷BarData繪制所有的DataSet:
@Override
public void drawData(Canvas c) {
BarData barData = mChart.getBarData();
for (int i = 0; i < barData.getDataSetCount(); i++) {
IBarDataSet set = barData.getDataSetByIndex(i);
if (set.isVisible()) {
drawDataSet(c, set, i);
}
}
}
在drawDataSet()中會先想BarBuffer中填充數(shù)據(jù)刹孔,然后遍歷buffer繪制矩形,需要注意的是,只會繪制在可見區(qū)域中的數(shù)據(jù)娜睛,可見區(qū)域就是ViewPortHandler中的mContentRect:
protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) {
Transformer trans = mChart.getTransformer();
//TODO 動畫暫不處理
// float phaseX = mAnimator.getPhaseX();
// float phaseY = mAnimator.getPhaseY();
float phaseX = 1f;
float phaseY = 1f;
//1.初始化buffer
BarBuffer buffer = mBarBuffers[index];
buffer.setPhases(phaseX, phaseY);
buffer.setDataSet(index);
buffer.setInverted(false);
buffer.setBarWidth(mChart.getBarData().getBarWidth());
buffer.feed(dataSet);
trans.pointValuesToPixel(buffer.buffer);
final boolean isSingleColor = dataSet.getColors().size() == 1;
if (isSingleColor) {
mRenderPaint.setColor(dataSet.getColor());
}
//2.遍歷buffer繪制矩形
for (int j = 0; j < buffer.size(); j += 4) {
//如果這個bar的right 小于 content的left就不繪制
if (!mViewPortHandler.isInBoundsLeft(buffer.buffer[j + 2]))
continue;
//如果這個bar的left大于content的right就不繪制
if (!mViewPortHandler.isInBoundsRight(buffer.buffer[j]))
break;
if (!isSingleColor) {
mRenderPaint.setColor(dataSet.getColor(j / 4));
}
c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
buffer.buffer[j + 3], mRenderPaint);
}
}
4.繪制柱狀圖上面的文字
文字的繪制是在drawValues方法中髓霞,類似于矩形的繪制,也是遍歷BarBuffer進(jìn)行繪制畦戒,我們只看單獨(dú)繪制一個dataSet中文字的流程:
//0.獲取要繪制的dataSet
IBarDataSet dataSet = datasets.get(i);
//1.是否要繪制文字
if (!shouldDrawValues(dataSet)) {
continue;
}
// mValuePaint.setTextSize(dataSet.getValueTextSize());
// boolean isInverted = mChart.isInverted(dataSet.getAxisDependency());
boolean isInverted = false;
//2.計(jì)算文字的高度
float valueTextHeight = Utils.calcTextHeight(mValuePaint, "8");
posOffset = (drawValueAboveBar ? -valueOffsetPlus : valueTextHeight + valueOffsetPlus);
negOffset = (drawValueAboveBar ? valueTextHeight + valueOffsetPlus : -valueOffsetPlus);
if (isInverted) {
posOffset = -posOffset - valueTextHeight;
negOffset = -negOffset - valueTextHeight;
}
//3.獲取buffer
BarBuffer buffer = mBarBuffers[i];
//TODO 動畫相關(guān)方库,暫不考慮
// final float phaseY = mAnimator.getPhaseY();
final float phaseY = 1;
//4.遍歷屬于該dataSet下的buffer繪制文字
if (!dataSet.isStacked()) {
// TODO 動畫相關(guān),暫不考慮
// for (int j = 0; j < buffer.buffer.length * mAnimator.getPhaseX(); j += 4) {
//
for (int j = 0; j < buffer.buffer.length; j += 4) {
//5.文字的中心位置在bar的中心
float x = (buffer.buffer[j] + buffer.buffer[j + 2]) / 2f;
//6.從左向右繪制障斋,如果某個value的x超過了content的right則不繪制
if (!mViewPortHandler.isInBoundsRight(x))
break;
//7.不在可見區(qū)域中的數(shù)據(jù)不會只文字
if (!mViewPortHandler.isInBoundsY(buffer.buffer[j + 1])
|| !mViewPortHandler.isInBoundsLeft(x))
continue;
BarEntry entry = dataSet.getEntryForIndex(j / 4);
//8.獲取繪制的文字原始值纵潦,如果設(shè)置了valueFormatter,就會格式化一下這個原始值
float val = entry.getY();
if (dataSet.isDrawValuesEnabled()) {
//9.開始繪制文字
drawValue(c, dataSet.getValueFormatter(), val, entry, i,
x,//繪制文字的x中心點(diǎn)
val >= 0 ? (buffer.buffer[j + 1] + posOffset) : (buffer.buffer[j + 3] + negOffset),//文字的top點(diǎn)垃环,就是bar的top加上文字的高度
dataSet.getValueTextColor()
);
}
}
drawValue方法如下邀层,這里就不講解了:
public void drawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color) {
mValuePaint.setColor(color);
c.drawText(formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x, y, mValuePaint);
}
到這里,數(shù)據(jù)的繪制就分析完了遂庄,后面將會分析Highlight的處理寥院。