现在在手上的是一个证券资讯类型的app,其中有涉及到股票行情界面,行情中有K线图等,看到网上很多人在求这方面的资料,所以我特地写了一个demo在此处给大家分享一下。
下面是做出来的效果图:
这个 界面 是如何画出来的我就不做介绍了,大家可以去下载项目源码。
背景图是利用canvas先画出一个矩形,然后再画几根虚线,均线图是通过path来绘制的,总之图的绘制是很简单的,我就不在这里作介绍了,大家可以去github下载源码看看。涉及到均线、最高价、最低价、收盘价、开盘价的概念大家可以百度一下。
我再这里要介绍的是计算问题:
大家可以看到分时图、日K、月K的左边的成交价格都是不一样的,而我们的k线都是通过这个价格来绘制的,也就是说价格是时刻变动,那么我们的k线绘制也是变动的。假设我们要计算分时图中价格为25.69的那一分钟应该如何画,画在屏幕中的哪一个位置,那么这个应该怎么画呢,价格是变动的,画的位置也是变动的,但是有一点我们屏幕的大小是不变的。所以我们可以通过背景图的高度来计算某个价格的线图应该从哪个地方开始画。我们可以计算出一个像素点对应多少个价格,分析图如下:
价格和像素形成个一个比例计算是:double heightScale = (endY - startY)/(highPrice - lowPrice);
所以价格25.69应该是画在mStartY = (float) (startY+ (highPrice - 25.69) * heightScale);
这个明白了之后其他的原理都是一样的,我就不介绍了,下面是部分代码:
[java] view plaincopy
@Override
protected void drawKChatBackGround() {
Rect dirty = new Rect(left, kChartTop, right, KChartbottom);
// 画背景图的矩形
mCanvas.drawRect(dirty, LineGrayPaint);
PathEffect effects = new DashPathEffect(new float[] { 5, 5, 5, 5 }, 1);
LineGrayPaint.setPathEffect(effects);
Path path = new Path();
int y = kChartTop + 15;
// 画上面的虚线
path.moveTo(left, y );
path.lineTo(right, y );
String text = getPriceText(highPrice);
int textHeight = (int) (textGrayPaint.descent() - textGrayPaint.ascent());
mCanvas.drawText(text,left - textGrayPaint.measureText(text) - 5,y + textHeight/2 ,textGrayPaint);
double max = highPrice - lowPrice;
if (max > 10){
// 分成四等分