折线图(一)绘制折线图坐标轴
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...
相关文章推荐
- iOS深入学习Block
- 20135213 20135231 信息安全系统设计基础课程第一次实验报告
- Android 语音合成(使用科大讯飞sdk)
- nyoj 203 【三国志】 【dij&&01背包】
- 在js里怎么实现Xcode里的callFuncN
- eclipse+maven搭建cxf webservice 完整例子
- 信息安全系统设计基础实验一—20135227黄晓妍 20135214万子惠
- 第二百二十八天 how can I 坚持
- jquery ajax参数详解
- 四件在我步入职业软件开发生涯那天起就该知道的事情
- 关于初学网页制作的心得
- 对视图的认识
- dom4J的使用事例
- 1013 Battle Over City
- 3D 图形转换(3D Transformation)
- 【大话GSM】LLC PDU填充RLC/MAC实例介绍
- android控件之Menu
- java开发工程师工资如何
- 实验报告(实验一)
- java 静态变量生命周期(类生命周期)