The logic-canvas-android from toly1994328

零、前言：

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

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

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

2018年9月5号更新：

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

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

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

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

优化代码

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

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

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

优化BaseView

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对象

pos.clone(x, y)

一、以一个五角星来引入

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

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

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

所谓公有属性是指所有绘制图形适用的属性：包括线条粗细(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)点为了明显，使用工具栏绘制网格参考

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)
);

公共属性展示到这里

二、直线绘制：

特有属性：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)
);

三、绘制矩形：

参数： 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))
);

四、画圆：

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

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

五、绘制弧线

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

六、绘制文字：

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

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

七、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);

八、正多边形和正多角形

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.连接传送门：

3.联系我

QQ:1981462002
邮箱：[email protected]
微信：zdl1994328

toly1994328 / logic-canvas-android Goto Github PK

logic-canvas-android's Introduction

零、前言：

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

2018年9月5号更新：

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

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

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

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

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

优化BaseView

引入

点类Pos的使用：

一、以一个五角星来引入

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

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

1.位移：

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

3.描边颜色、粗细

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

5.缩放：

6.锚点：

7.填充

二、直线绘制：

1.单线条

2.多线条

三、绘制矩形：

四、画圆：

五、绘制弧线

六、绘制文字：

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

八、正多边形和正多角形

后记、

1.声明：

2.连接传送门：

3.联系我

4.欢迎关注我的微信公众号，最新精彩文章，及时送达：

logic-canvas-android's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org