您的位置:首页 > 其它

折线图(一)绘制折线图坐标轴

2015-11-16 22:27 495 查看


如图,对于手机图形的绘制,他的坐标轴原点在左上方.

绘制折线图的第一步就是要先绘制出,折线图的坐标轴,由于手机坐标轴原点在左上方.那么折线图的原点y轴久正好相反。原点坐标是(0,height)

分别为4个步骤,绘制x轴,y轴,x轴箭头,y轴箭头

为了看清楚这折线图,我们把它设置view边缘100px内的位置.

我的自定义包命为:

sam.android.utils.widget



publicclassLineChartViewextendsView

{
publicLineChartView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}

@Override
protectedvoidonDraw(Canvascanvas){
//绘制坐标轴
drawAxis(canvas);
}

/**
*绘制坐标轴,并且设置100padding给LineChartView
*@paramcanvas
*/
privatevoiddrawAxis(Canvascanvas){
intchartViewHeight=getMeasuredHeight();//获取LineChartView高度
intcharViewWidth=getMeasuredWidth();//获取LineChartView宽度
Paintpaint=newPaint();//画笔
paint.setColor(Color.BLACK);//设置画笔为黑色
paint.setStrokeWidth(5);//设置画笔尖大小为5px

/*
*绘制直线.在2点之间连线
*startX起点的x坐标
*startY起点的y坐标
*endX终点的x坐标
*endY终点的y坐标
*canvas.drawLine(startX,startY,endX,endY)
*/

//绘制直线,paddingTop了100px的y轴,
canvas.drawLine(100,chartViewHeight-100,100,100,paint);

//绘制y轴左边半边箭头长度为开平方(20^2+20^2),别为为什么。。。勾股定理。。。
canvas.drawLine(100,100,100-20,120,paint);

//绘制y轴右边半边箭头长度为开平方(20^2+20^2)
canvas.drawLine(100,100,100+20,120,paint);

//绘制直线,在(100,chartViewHeight-100)与(100,100)连线,也就是paddingLeft了100px的x轴,
canvas.drawLine(100,chartViewHeight-100,charViewWidth-100,chartViewHeight-100,paint);

//绘制x轴上半部分箭头,长度为开平方(20^2+20^2)
canvas.drawLine(charViewWidth-100,chartViewHeight-100,charViewWidth-100-20,chartViewHeight-100-20,paint);

//绘制x轴下半部分箭头,长度为开平方(20^2+20^2)
canvas.drawLine(charViewWidth-100,chartViewHeight-100,charViewWidth-100-20,chartViewHeight-100+20,paint);
}

}


<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<sam.android.utils.widget.LineChartView
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</LinearLayout>




待更新2...
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: