D6-Android绘图之一言不合画个表

零、前言

[1].本控件绘图部分使用我的LogicCanvas绘图库:基础使用在此, [2].喜欢的话可以到github上看看,顺便给个star [3].发现向量还怪好用的,它不会出现在屏幕上,但却能支撑图形的形状 [4].也许这是绘图篇的最后一篇了,还要总结其他方面的知识点,以后有机会一定再深入探究一下。 [5].时间指针是通过角度确定的,所以让它们转起来很简单,就不演示了

效果图

效果图

device-2018-09-07-103155.png


成员变量

protected Pos pos = new Pos(0, 0);//点
protected ShapeLine sl = new ShapeLine();//线
protected ShapeText st = new ShapeText();//文字
protected ShapeArc sa = new ShapeArc();//圆弧
private Pos coo = v2(500, 800);//坐标系原点
private int mDotWith = 3;
private int mDotColor = 3;

绘制方法

Painter painter = PainterEnum.INSTANCE.getInstance(canvas);
//绘制网格
//CanvasUtils.drawGrid(getContext(), 50, canvas);
//绘制坐标系
//CanvasUtils.drawCoord(getContext(), coo, 50, canvas);
//绘制60个小线
for (int i = 0; i < 60; i++) {
    ShapeLine a = null;
    if (i % 5 == 0) {
        a = (ShapeLine) sl.deepClone().ang(i * 6f).c(260f).parse().coo(coo);
        mDotWith = 5;
        mDotColor = ColUtils.randomRGB();
    } else {
        a = (ShapeLine) sl.deepClone().ang(i * 6f).c(280f).parse().coo(coo);
        mDotWith = 3;
        mDotColor = Color.BLUE;
    }
    ShapeLine b = a.deepClone().c(300f).v(null).parse();
    Shape c = sl.deepClone().ps(a.mv, b.mv).coo(coo).b(mDotWith).ss(mDotColor);
    //绘制小圆点
    painter.draw(c);
    if (i % 5 == 0) {
        painter.draw(sa.deepClone().r(4).ang(360).fs(Color.BLACK).p(a.mv).coo(coo));
    
}
//绘制四个圆弧
for (int i = 0; i < 4; i++) {
    Shape circle = sa.deepClone().r(350).ang(70).coo(this.coo).b(3).ss(Color.parseColor("#D4DA")).rot(10 + 90 * i).b(6);
    painter.draw(circle);
}
//绘制文字
painter.drawText(st.deepClone().size(70).str("Ⅲ").p(coo.add(350, 30)));
painter.drawText(st.deepClone().size(70).str("Ⅵ").p(coo.add(0, 350 + 30)));
painter.drawText(st.deepClone().size(70).str("Ⅸ").p(coo.add(-350, 30)));
painter.drawText(st.deepClone().size(70).str("Ⅻ").p(coo.add(0, -350 + 30)));
painter.drawText(st.deepClone().size(35).str("Toly").p(coo.add(0, -180)));
//绘制小圆
Shape center1 = sa.deepClone().ang(270f).r(25).coo(this.coo).b(5).ss(Color.parseColor("#6B6B6B);
Shape center2 = sa.deepClone().ang(360).r(15).coo(this.coo).b(5).fs(Color.GRAY);
Shape center3 = sa.deepClone().ang(360).r(5).coo(this.coo).fs(Color.BLACK);
//绘制指针
Shape secLine =  sl.deepClone().ang(-90f).c(330f).coo(this.coo).b(2).ss(Color.parseColor("#6B6B6B"));
Shape hourLine =  sl.deepClone().ang(45f).c(150f).coo(this.coo).b(8).ss(Color.parseColor("#8FC552"));
Shape minLine =  sl.deepClone().ang(145f).c(250f).coo(this.coo).b(8).ss(Color.parseColor("#87B953"));
        
painter.draw(center1, secLine, hourLine, minLine, center2, center3);

OK,就这么简单。


后记、

1.声明:

[1]本文由张风捷特烈原创,转载请注明 [2]欢迎广大编程爱好者共同交流 [3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正 [4]你的喜欢与支持将是我最大的动力

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

奇妙的 CSS shapes(CSS图形)

27050
来自专栏Android开发与分享

【Android】RecyclerView:打造悬浮效果

1K100
来自专栏codelang

用kotlin来实现一个饼图

11920
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

37170
来自专栏HTML5学堂

一步步实现静态页面布局

本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

779100
来自专栏Android知识点总结

Android原生绘图之炫酷倒计时

52640
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 语法

上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

8930
来自专栏Jack的Android之旅

自定义天气显示温度变化的LinearChart控件

这次发表的是前几个月搞定的一个自定义控件,那时自己在写一个小的查看天气的软件,在这过程中就涉及了显示天气变化的折线图,一开始想用一些画图框架来解决问题,不过考虑...

29410
来自专栏HTML5学堂

CSS3圆角边框“完全解读”

HTML5学堂小编:圆形,一个很奇妙的形状,在各种地方都可以看得到,特别是现在各类网站,都会有各种的圆形。圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使...

57050
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

15920

扫码关注云+社区

领取腾讯云代金券