D3-Android 自定义控件绘图之柱状图
D3-Android 自定义控件绘图之柱状图
张风捷特烈
发布于 2018-09-29 11:20:24
发布于 2018-09-29 11:20:24
零、前言
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你的喜欢与支持将是我最大的动力
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录