零、前言
[1].本控件绘图部分使用我的LogicCanvas绘图库:基础使用在此,
[2].喜欢的话可以到github上看看,顺便给个star
[3].今天突然发现竟然LogicCanvas绘图库,忘了绘制文字这个重要功能,赶紧加
[4].写完了,顺便写篇文章吧,基于LogicCanvas实现坐标系及网格(已内置),再画个柱状图看看吧
一、网格绘制:
这个很简单,for里面拉线就行了
使用:第二参数是格子宽
CanvasUtils.drawGrid(mContext, 50, canvas);
代码实现:
/**
* 绘制网格
*
* @param ctx 上下文
* @param step 间隔
* @param canvas 画布
*/
public static void drawGrid(Context ctx, int step, Canvas canvas) {
Pos pos = Pos.init();
Painter painter = new Painter(canvas);
if (step == 0) {
return;
}
//横线
for (int i = 0; i < getScreenHeight(ctx) / step; i++) {
;
painter.draw(new ShapeLine().ps(
pos.form(0f, 0f - step * i),
pos.form(getScreenWidth(ctx) + 0F, 0f - step * i)
).ss(Color.GRAY).b(2f)
);
}
//竖线
for (int i = 0; i <= getScreenWidth(ctx) / step; i++) {
painter.draw(new ShapeLine().ps(
pos.form(0f + step * i, 0f),
pos.form(0f + step * i, 0f - getScreenHeight(ctx)))
.ss(Color.GRAY).b(2f)
);
}
}
二、坐标系绘制:
使用:
private Pos pos = Pos.init();
CanvasUtils.drawCoord(mContext, pos.form(400, 800), 50, canvas);
代码实现:
/**
* @param ctx 上下文
* @param coo 坐标系原点
* @param step 小线间隔(像素)
* @param canvas 画布
*/
public static void drawCoord(Context ctx, Pos coo, float step, Canvas canvas) {
Pos pos = Pos.init();
Painter painter = new Painter(canvas);
int cooColor = Color.BLACK;
Float lineHeight = dp2px(ctx, 4f);
int winH = getScreenHeight(ctx);
int winW = getScreenWidth(ctx);
//横线
painter.draw(new ShapeLine()
.ps(pos.form(-coo.x, 0), pos.form(winW - coo.x, 0))
.ss(cooColor).coo(coo));
//竖线
painter.draw(new ShapeLine()
.ps(pos.form(0, -(winH - coo.y)), pos.form(0, coo.y))
.ss(cooColor).coo(coo));
//右侧小线
for (int i = 1; i < (winW - coo.x) / step; i++) {
Pos p0 = pos.form(step * i, 0);
painter.draw(new ShapeLine()
.ps(p0, pos.form(step * i, lineHeight)).
ss(cooColor).coo(coo));
painter.drawText(
new ShapeText()
.str("" + (int) (i * step)).al(">")
.size(20).p(p0.add(coo).add(pos.form(10, 25)))
.ss(cooColor)
);
}
//左侧小线
for (int i = 1; i < coo.x / step; i++) {
Pos p0 = pos.form(-step * i, 0);
painter.draw(new ShapeLine()
.ps(p0, pos.form(-step * i, lineHeight)).
ss(cooColor).coo(coo));
painter.drawText(
new ShapeText()
.str("-" + (int) (i * step)).al(">")
.size(20).p(p0.add(coo).add(pos.form(10f, 25f)))
.ss(cooColor)
);
}
//上侧小线
for (int i = 1; i < coo.y / step; i++) {
Pos p0 = pos.form(0, step * i);
painter.draw(
new ShapeLine()
.ps(p0, pos.form(lineHeight, step * i)).
ss(cooColor).coo(coo));
painter.drawText(
new ShapeText()
.str((int) (i * step) + "").al(">")
.size(20).p(p0.add(coo).add(pos.form(-10f, 5f)))
.ss(cooColor)
);
}
//下侧小线
for (int i = 1; i < (winH - coo.y) / step; i++) {
Pos p0 = pos.form(0, -step * i);
painter.draw(new ShapeLine()
.ps(p0, pos.form(lineHeight, -step * i)).
ss(cooColor).coo(coo));
painter.drawText(
new ShapeText()
.str("-" + (int) (i * step)).al(">")
.size(20).p(p0.add(coo).add(pos.form(-10, 5f)))
.ss(cooColor)
);
}
//右小箭头
painter.draw(new ShapeLine().ps(
pos.form(winW - coo.x - lineHeight * 2, lineHeight),
pos.form(winW - coo.x - lineHeight * 2, -lineHeight),
pos.form(winW - coo.x, 0),
pos.form(winW - coo.x - lineHeight * 2, lineHeight)
).fs(cooColor).coo(coo));
//上小箭头
painter.draw(new ShapeLine().ps(
pos.form(lineHeight, coo.y - lineHeight * 2),
pos.form(-lineHeight, coo.y - lineHeight * 2),
pos.form(0, coo.y),
pos.form(lineHeight, coo.y - lineHeight * 2)
).fs(cooColor).coo(coo));
}
/**
* 获得屏幕高度
*
* @return 屏幕高度
*/
private static int getScreenWidth(Context ctx) {
WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.widthPixels;
}
/**
* 获得屏幕宽度
*
* @return 屏幕宽度
*/
private static int getScreenHeight(Context ctx) {
WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.heightPixels;
}
三、柱状图的画法:OnDraw中:
final Painter painter = new Painter(canvas);
for (int i = -4; i < 14; i += 2) {
float num = (float) (Math.random() * 500);
Shape line = new ShapeRect()
.x(50f).y(num).r(10f)
.fs(ColUtils.randomRGB()).coo(400f, 800f).p(50f * i, 0f);
//绘制文字
painter.drawText(
new ShapeText().str((int)num + "").size(28)
.p(pos.form(22+50f * i, -num-10)
.add(pos.form(400f, 800f)))
);
painter.draw(line);
}
CanvasUtils.drawGrid(mContext, 50, canvas);
CanvasUtils.drawCoord(mContext, pos.form(400, 800), 50, canvas);
后记、
1.声明:
[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
[4]你的喜欢与支持将是我最大的动力
2.连接传送门:
更多安卓技术欢迎访问:安卓技术栈
我的github地址:欢迎star
简书首发,腾讯云+社区同步更新
张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com
3.联系我
QQ:1981462002
邮箱:1981462002@qq.com
微信:zdl1994328