开源计划之--Android绘图库--LogicCanvas

时间 2019-11-24

原文原文链接

零、前言：(注：本库仅供学习玩耍使用,性能方面恐有不足)

安卓图形绘制一直以来感受都很繁琐
在html5时，我用JavaScript封装了一个HTML5的canvas库。
HTML5感受和Android的canvas挺类似，因此考虑移植过来。
绘图库核心是用配置信息绘图，经过逻辑运算绘图
本篇会持续更新，记录LogicCanvas的成长历程html

2018年9月4号更新：由V0.01升级到V0.02

对项目进行大规模重构，分解ShapePath类,优化调用形式，更好解耦
因为边线而致使的精准度问题已修正加入刚刚属性：路径的方向，代号：dirhtml5

2018年9月5号更新：

此次更新也挺厉害的，将Pos点类使用原型模式，避免不少地方都要new
Pos点类思想层面由点，升级到向量，实现了向量的基本用法
加入绘制文字功能(之前居然没发现)：目前只是放字和位置，之后会完善更多文字方面的功能
对坐标系统进行必定的优化
Pos的向量形式使用有点庞大，新写一篇文章讲述，详见：Android绘图之和我一块儿画箭头android

2018年9月6号更新：由V0.01升级到V0.03

Painter采用单例模式优化原型模式，各Shape采用深拷贝来解决构造较长、繁琐的状况比较new 对象和拷贝的效率问题，拷贝一点。具体见文：来谈谈Java的深浅拷贝吧完善向量部分，进行测试git

2018年9月7号更新：由V0.03升级到V0.04

优化代码github

2018年9月8号更新：由V0.04升级到V0.05

支持点的绘制，及使用点对极坐标方程进行模拟，详见：Android模拟绘制极坐标方程优化BaseView编程

2018年9月13号更新：由V0.05升级到V0.06

优化BaseViewcanvas

2018年9月17号更新：由V0.06升级到V0.08

优化BaseView

引入

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

implementation 'com.github.toly1994328:logic-canvas-android:0.08'
复制代码

点类Pos的使用：

//开始时初始化一个点对象
protected Pos pos = new Pos(0, 0);
复制代码

//须要另外一个点的话：就好了，使用原型，避免new对象bash

pos.clone(x, y)
复制代码

1、以一个五角星来引入

在自定义View的onDraw方法中：绘制外接圆半径100,内接圆半径50的5角星

Painter painter = PainterEnum.INSTANCE.getInstance(canvas);
painter.draw(
    new ShapeStar()
            .num(5)//角的个数,数字任意
            .R(100f)//外接圆半径
            .r(50f)////内接圆半径
复制代码

2、公有属性演示：注：公共属性对应的函数在后调用

所谓公有属性是指全部绘制图形适用的属性：包括线条粗细(b)、线条颜色(ss)、填充颜色(ss)、位移(p)、坐标系(coo)、旋转(rot)、缩放(sx,sy)屏幕适配dp单位(dp)微信

属性	默认值	简介	备注
p	Pos(0,0)	图形距画布左顶点偏移量
rot	0	旋转角度	弧度制-
sx	0	x缩放	-
sy	0	y缩放	-
coo	Pos(0,0)	修改坐标系	平移、缩放、旋转使用
a	Pos(0,0)	修改锚点	-
b	1	线条粗	-
ss	"#000000"	线条样式	-
fs	"#0000ff"	填充样式	-
dir	逆时针方向	方向	-

1.位移：

p 参数类型：Pos 注：为了和数学更好契合，采用笛卡尔坐标系(上右正)，默认屏幕左上角(0,0)点为了明显，使用工具栏绘制网格参考maven

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .p(pos.clone(200, -100)));//位移X,Y
复制代码

2.坐标系：为了支持坐标系，但是煞费苦心啊！

coo 参数类型：Pos 为了明显，使用工具栏绘制坐标系参考注意：使用坐标系后、平移、旋转、缩放都会根据新的坐标系来

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .coo(pos.clone(600, 200))//设置坐标系
);
复制代码

3.描边颜色、粗细

ss 描边颜色参数类型：int (颜色) b 描边粗细参数类型：int

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .p(pos.clone(200, -100))
        .ss(Color.RED)//描边颜色
        .b(5f)//描边线条粗细
);
复制代码

4.旋转：思考良久，单位仍是采用：角度数吧

rot 旋转参数类型：Float

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .ss(Color.RED)
        .coo(pos.clone(600, 200))
        .rot(90f)//设置旋转
);
复制代码

5.缩放：

sx、sy 缩放比例参数类型：Float

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .ss(Color.RED)
        .coo(pos.clone(600, 200))
        .sx(1.5f)
        .sy(1.5f)
);
复制代码

6.锚点：

coo 参数类型：Pos

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .ss(Color.RED)
        .coo(pos.clone(600, 200))
        .a(pos.clone(100, 100))
        .sx(1.5f)
        .sy(1.5f)
);
复制代码

7.填充

fs 描边颜色参数类型：int (颜色)

painter.draw(new ShapeStar()
        .num(5)
        .R(100f)
        .r(50f)
        .coo(pos.clone(600, 200))
        .fs(Color.YELLOW)
);
复制代码

公共属性展现到这里

2、直线绘制：

特有属性：ps 参数类型不定个数的Pos。再次强调：默认使用的是0,0为原点的笛卡尔坐标系

1.单线条

painter.draw(
        new ShapeLine()
                .ps(pos.clone(0, 0), pos.clone(200, -200))
                .b(5f)
);
复制代码

2.多线条

painter.draw(
        new ShapeLine()
                .ps(
                        pos.clone(0, 0),
                        pos.clone(200, -200),
                        pos.clone(200,-400),
                        pos.clone(200,-400),
                        pos.clone(800,-400),
                        pos.clone(0,0)
                ).b(5f)
);
复制代码

3、绘制矩形：

参数： x 矩形宽 y:矩形高 r:矩形圆角

painter.draw(
        new ShapeRect()
                .x(1000/2f).y(618/2f).r(50f)
                .b(5f).ss(Color.RED).p(pos.clone(100,-100))
);
复制代码

4、画圆：

dir true 逆时针方向绘制--默认 r 半径

painter.draw(
        new ShapeArc(1)
                .r(100f)
                .b(5f).ss(Color.RED)
                .p(pos.clone(200,-200))
复制代码

5、绘制弧线

painter.draw(
        new ShapeArc()
                .r(100f).ang(135f)
                .b(1f).ss(Color.RED)
                .p(pos.clone(200,-100))
);
复制代码

6、绘制文字：

al 对齐方式：String 类型，效果下如图 str 文字 size 大小

painter.drawText(
        new ShapeText()
                .str("Toly")//文字
                .size(80)//大小
                .al("<")//对齐方式
                .p(400f,400f));
复制代码

7、LogicCanvas与Android原生Path结核使用

Path path = new Path();// 建立Path
path.lineTo(200, -200);// lineTo
path.lineTo(200,0);
path.close();
Shape shapeEmpty = new ShapeEmpty(path)
        .b(6f).coo(400f, 400f);
painter.draw(shapeEmpty);
复制代码

8、正多边形和正多角形

for (int i = 5; i < 10; i++) {
    painter.draw(
            new ShapeStar(ShapeStar.MODE_POLYGON)
                    .num(i).R(80f)
                    .b(4f)
                    .p(pos.clone(20+210*(i-5),-20)));//内接圆半径
    painter.draw(
            new ShapeStar(ShapeStar.MODE_REGULAR)
                    .num(i).R(80f)
                    .b(4f)
                    .p(pos.clone(20+210*(i-5),-220)));//内接圆半径
}
复制代码

展现到这里，持续更新，更多功能敬请期待更新时间：2018-09-12：13:25 LogicCanvas-项目地址：github

后记、

1.声明：

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

2.联系我

QQ:1981462002 邮箱：1981462002@qq.com 微信：zdl1994328