折线图(四)计算坐标轴文字大小,确定准确位置
2015-11-18 13:22
399 查看
计算paint后的文字长度,高度 方法如下
然后实现和上一篇差不多。
待更新5.
Paint xValuePaint = new Paint(); //画笔 xValuePaint.setColor(Color.BLACK); xValuePaint.setTextSize(textSize); xValuePaint.getTextBounds(xName, 0, xName.length(), nRect); int nWith = nRect.width();//获取x轴名字长度 int nHeight = nRect.height();//获取x轴名字高度
然后实现和上一篇差不多。
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="LineChartView"> <!-- 视图padding --> <attr name="chartPadding" format="dimension"></attr> <!-- x轴单位 长度--> <attr name="xUnit" format="dimension"></attr> <!-- x轴单位值--> <attr name="xValue" format="integer"></attr> <!-- 单位字体大小--> <attr name="unitTextSize" format="dimension"></attr> <!-- y轴单位名称--> <attr name="xName" format="string"></attr> <!-- x轴单位 长度--> <attr name="yUnit" format="dimension"></attr> <!-- x轴单位值--> <attr name="yValue" format="integer"></attr> <!-- x轴单位名称--> <attr name="yName" format="string"></attr> </declare-styleable> </resources>
/**
* 绘制折线图详情
*/
public class LineChartView extends View
{
/**
* 折线图padding
*/
private float chardPading;
/**
* x单位长度
*/
private float xUnit;
/**
* y单位长度
*/
private float yUnit;
private float textSize;
/**
* 单位名字
*/
private String xName;
/**
* 单位值
*/
private int xValue;
private String yName;
private int yValue;
public LineChartView(Context context, AttributeSet attrs) {
super(context, attrs);
//获取提供的chardPading长度, 如果不提供,默认为100px. 注意,拿到的dip单位最终会转化为px
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LineChartView);
chardPading = typedArray.getDimension(R.styleable.LineChartView_chartPadding, 100);//默认视图距离边界的长度
xUnit = typedArray.getDimension(R.styleable.LineChartView_xUnit, 50);//默认单位长度为50px
xName = typedArray.getString(R.styleable.LineChartView_xName);//x 轴 名字
xName = null != xName ? xName : "x";//如果不提供名字,则默认为x
xValue = typedArray.getInt(R.styleable.LineChartView_xValue, 10);//默认单位值为10
textSize = typedArray.getDimension(R.styleable.LineChartView_unitTextSize, 25);//默认25px字体大小
yUnit = typedArray.getDimension(R.styleable.LineChartView_yUnit, xUnit);//默认单位值为与xUnit一样
yName = typedArray.getString(R.styleable.LineChartView_yName);//y 轴 名字
yName = null != yName ? yName : "y";//如果不提供名字,则默认为y
yValue = typedArray.getInt(R.styleable.LineChartView_yValue, xValue);//默认单位值与xValue一样
}
@Override
protected void onDraw(Canvas canvas) {
//绘制坐标轴
drawAxis(canvas);
//绘制x坐标轴详情
drawX_AxisState(canvas);
drawY_AxisState(canvas);
}
/**
* 为了不遮住坐标轴,给予100padding给它
*/
int arrowPadding = 40;
/**
* 绘制x轴名称,按提供的长度来标识长度值
*
* @param canvas
*/
private void drawX_AxisState(Canvas canvas) {
Paint paint = new Paint(); //直线画笔
paint.setColor(Color.BLACK);//设置画笔为黑色
paint.setStrokeWidth(2);//设置画笔尖大小为2px
int height = getMeasuredHeight() - (int) chardPading;
int drawXlengh = getMeasuredWidth() - (int) chardPading * 2 - arrowPadding;//保留能看到箭头
int xUnit = (int) this.xUnit;
Rect nRect = new Rect();
Paint xValuePaint = new Paint(); //画笔 xValuePaint.setColor(Color.BLACK); xValuePaint.setTextSize(textSize); xValuePaint.getTextBounds(xName, 0, xName.length(), nRect); int nWith = nRect.width();//获取x轴名字长度 int nHeight = nRect.height();//获取x轴名字高度
canvas.drawText(xName, getMeasuredWidth() - chardPading - nWith / 2, height + nHeight + 15, xValuePaint);
for (int i = xUnit, j = 1; i < drawXlengh; i += xUnit, j++) {
canvas.drawLine(chardPading + i, height, chardPading + i, height - 15, paint);
int drawvalue = xValue * j;
Rect rect = new Rect();
xValuePaint.getTextBounds(drawvalue + "", 0, (drawvalue + "").length(), rect);
int txtWith = rect.width();
int txtHeght = rect.height();
canvas.drawText(drawvalue + "", chardPading + i - txtWith / 2, height + txtHeght + 15, xValuePaint);
}
}
/**
* 绘制y轴名称,按提供的长度来标识长度值
*
* @param canvas
*/
private void drawY_AxisState(Canvas canvas) {
Paint paint = new Paint(); //直线画笔
Paint yValuePaint = new Paint(); //画笔
yValuePaint.setColor(Color.BLACK);
yValuePaint.setTextSize(textSize);
paint.setColor(Color.BLACK);//设置画笔为黑色
paint.setStrokeWidth(2);//设置画笔尖大小为2px
int height = getMeasuredHeight() - (int) chardPading;
int drawYlengh = getMeasuredHeight() - (int) chardPading * 2 - arrowPadding;//保留能看到箭头
int yUnit = (int) this.yUnit;
Rect nRect = new Rect();
yValuePaint.getTextBounds(yName, 0, yName.length(), nRect);
int nWith = nRect.width();
int nHeight = nRect.height();
canvas.drawText(yName, chardPading - nWith - 15, chardPading + nHeight / 2, yValuePaint);
for (int i = yUnit, j = 1; i < drawYlengh; i += yUnit, j++) {
int drawvalue = yValue * j;
Rect rect = new Rect();
yValuePaint.getTextBounds(drawvalue + "", 0, (drawvalue + "").length(), rect);
int txtWith = rect.width();
int txtHeght = rect.height();
canvas.drawLine(chardPading, height - i, chardPading + 15, height - i, paint);
canvas.drawText(drawvalue + "", chardPading - txtWith - 15, height - i + txtHeght / 2, yValuePaint);
}
}
/**
* 绘制坐标轴, 并且设置100padding给LineChartView
*
* @param canvas
*/
private void drawAxis(Canvas canvas) {
int chartViewHeight = getMeasuredHeight(); //获取LineChartView高度
int charViewWidth = getMeasuredWidth(); //获取LineChartView宽度
Paint paint = new Paint(); //画笔
paint.setColor(Color.BLACK);//设置画笔为黑色
paint.setStrokeWidth(4);//设置画笔尖大小为4px
/*
* 绘制直线.在2点之间连线
* startX 起点的x坐标
* startY 起点的y坐标
* endX 终点的x坐标
* endY 终点的y坐标
* canvas.drawLine(startX, startY, endX, endY)
*/
//绘制直线paddingTop 了chardPading的y轴
canvas.drawLine(chardPading, chartViewHeight - chardPading, chardPading, chardPading, paint);
//绘制y轴左边半边箭头
canvas.drawLine(chardPading, chardPading, chardPading - 10, chardPading + 10, paint);
//绘制y轴右边半边箭头
canvas.drawLine(chardPading, chardPading, chardPading + 10, chardPading + 10, paint);
//绘制直线paddingLeft 了chardPading的x轴,
canvas.drawLine(chardPading, chartViewHeight - chardPading, charViewWidth - chardPading, chartViewHeight - chardPading, paint);
//绘制x轴上半部分箭头
canvas.drawLine(charViewWidth - chardPading, chartViewHeight - chardPading, charViewWidth - chardPading - 10, chartViewHeight - chardPading - 10, paint);
//绘制x轴下半部分箭头
canvas.drawLine(charViewWidth - chardPading, chartViewHeight - chardPading, charViewWidth - chardPading - 10, chartViewHeight - chardPading + 10, paint);
}
}
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="折线图(四)" android:layout_centerHorizontal="true" /> <sam.android.utils.widget.LineChartView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:chartPadding="30dp" app:xValue="10" app:xUnit="30dp" app:xName="x轴" app:unitTextSize="12sp" app:yValue="10" app:yUnit="30dp" app:yName="y轴" /> </RelativeLayout>
待更新5.
相关文章推荐
- MySql中允许远程连接
- 监听键盘- KeyBoard
- 第一篇正式文章 随便聊聊吧
- “UNIX系统开发-gcc参数详解"学习笔记
- 对栈操作的理解
- python向mysql插入特殊字符
- 创建哈佛曼树并求出哈弗曼编码
- Dictionary<k, v>使用技巧
- Loadrunner-soap_request初体验
- Sales Order Flow Statuses
- 欢迎使用CSDN-markdown编辑器
- angular指令中scope三个符号的说明
- 模版+数据分离渲染方式的设计与实现
- activeMq实战
- Java线程创建详解
- 经得起雷劈:关于double和int/long相互转换失去精度计算错误的问题
- oracle增加表空间的四种方法 - Oracle
- koala不支持中文的解决办法(问题出现在使用中文字体时报错)
- 第1章 ビッグデータとデータの活用
- 第1章 ビッグデータとデータの活用