由于项目需要，要实现这种效果的曲线图，以下是为标注的图形题材
20160422131558011.png
当滑动标注线的位置的时候动态的显示Y轴的数据。
在这里我们先不介绍使用自定义View绘制曲线图，由于项目的实际需要，使用第三方绘制曲线图的图表库 如：AChartEngine、XCL-Chart、MPAndroidChart、andbase开源框架库都已经不太满足实际项目的需求。
不过在andbase 这个开源框架库中可以实现这种效果：
20160422132810431.png
存在一定的缺陷，因为时间的原因没有更多的了解当中的 Librarys 而是直接引用了jar (亲！尽量还是在了解当中的库之后再引用其jar文件)
所以能否将其实现，还未可知！
还是介绍时候 ChartView extends View 当中的一些简单实现吧！因为“标注线”要随手指的Move 显示曲线连点的的Y轴数据所以我们的拿到移动的X轴的距离或者是移动的Y轴距离。定义一个mPonits[Count] 数组容器将X轴各个点的距离存储到该数组当中！因为当我们移动标注线的位置是，会得到相应的X、Y轴坐标点的位置。
具体的思路实现就是以上的逻辑，在这里就贴出部分的代码：首先我们的监听手势事件重写 OnTouchEvnent(MotionEvent event)
private boolean isTouched;// 是否触发点击事件
private long firstClickTime = 0;
private long secondClickTime = 0;
private float moveDistance = 300; // 设置默认的移动距离
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
isTouched = true;
if(secondClickTime - firstClickTime < 1000) {
firstClickTime = 0;
secondClickTime = 0;
}
Log.i("wangly", "action-down");
if(event.getX() >=(moveDistance-30) && event.getX() <= (moveDistance+30)) {
isTouched = true;
invalidate();
}
break;
case MotionEvent.ACTION_MOVE:
Log.i("wangly", "action-move");
if(isTouched){
/**
* 在这里我记录的是 X轴坐标，同理你也可以定义Y轴坐标 event.getY();
* */
moveDistance = event.getX();//将此时手势x坐标记录下来, 根据此x重绘中间线、
for (int i = 0; i < mPonits.length; i++) {
if(mPonits[i] == moveDistance){
Toast.makeText(mContext,"日期"+xRawDatas.get(i)+"--为"+yRawData.get(i), 0).show();
}
}
isTouched = true;
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if(isTouched) {
moveDistance = event.getX();//记录当下移动位置坐标
isTouched = false;
invalidate();
}
break;
return true;
}
return true;
}
在OnDraw(Canvas canvas) 方法中将X轴各个点的坐标存储到mPonits[Count] 数组当中，
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
width = getWidth();
width = width - 2 * mInnerCicleRadius - leftoffset;
// 计算出x轴的单位距离
mDistance = (width - mYTitleWitdh) / (mYLineCount - 1);
int height = getHeight();
int scrollX = getScrollX();
float orgStroke = mPaint.getStrokeWidth();
float orgStrokeCicle = mOuterCiclePaint.getStrokeWidth();
// y轴的真实距离
yDistance = height - mXAnixValueHight - mContentMarginTop;
float yLen = yDistance / totalnum;
if (mYanixValues != null && mYanixValues.size() != 0) {
// 将yDistance变成y轴上的单位距离
yDistance = yDistance / (mYanixValues.size() - 1);
}
// 绘制节点圆
mOuterCiclePaint.setColor(mOuterCicleColor);
mOuterCiclePaint.setStyle(Style.FILL);
mOuterCiclePaint.setStrokeWidth(mTrendLineSize);
mInnerCiclePaint.setStrokeWidth(mTrendLineSize);
for (int i = startPosition; i < endPosition; i++) {
int startX = mDistance * i + leftoffset - offset;
int startY = (int) (height - (yLen * mDate.get(i) + mXAnixValueHight));
canvas.drawCircle(startX, startY, mInnerCicleRadius,
mInnerCiclePaint);
// 超过10000万的画空心圆
if (mDate.get(i) >= standardnum) {
canvas.drawCircle(startX, startY, mOuerCicleRadius,
mOuterCiclePaint);
}
mPoints[i] = startX;
}
当中还是存在部分瑕疵，那就是，在手指移动的范围需要控制一下，在这里就不过多的赘述了！简单的贴了一下代码，如有更好的实现方式还请不吝赐教啊，共同进步吗！哈哈哈
网友评论