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

张风捷特烈

发布于 2018-09-29 11:19:26

1.1K0

发布于 2018-09-29 11:19:26

零、前言：

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

原理简单示意图：

绘制一个五角星的过程.png

引入

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
    
implementation 'com.github.toly1994328:logic-canvas-android:0.01'

一、以一个五角星来引入

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

ZCanvas zCanvas = new ZCanvas(canvas);
zCanvas.drawNStar(
    new Painter()
            .num(5)//角的个数,数字任意
            .R(100f)//外接圆半径
            .r(50f)////内接圆半径

五角星演示.png

二、公有属性演示：

所谓公有属性是指所有绘制图形适用的属性：包括线条粗细(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"	填充样式	-
dp	-	dp单位	在链式末尾调用

1.位移：

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

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .p(new Pos(200, -100)));//位移X,Y

位移p.png

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

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

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .coo(new Pos(600, 200))//设置坐标系
);

坐标系coo.png

3.描边颜色、粗细

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

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .p(new Pos(200, -100))
        .ss(Color.RED)//描边颜色
        .b(5f)//描边线条粗细
);

描边，颜色.png

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

rot 旋转参数类型：Float

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .ss(Color.RED)
        .coo(new Pos(600, 200))
        .rot(90f)//设置旋转
);

旋转.png

5.缩放：

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

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .ss(Color.RED)
        .coo(new Pos(600, 200))
        .sx(1.5f)
        .sy(1.5f)
);

缩放.png

6.锚点：

coo 参数类型：Pos

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .ss(Color.RED)
        .coo(new Pos(600, 200))
        .a(new Pos(100, 100))
        .sx(1.5f)
        .sy(1.5f)
);

修改参照点放大.png

7.填充

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

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(100f)
        .r(50f)
        .coo(new Pos(600, 200))
        .fs(Color.YELLOW)
);

填充.png

8.dp单位适配

下面蓝色是没有适配的，黄色是适配的，蓝色在不同分辨率产生差异，黄色则正常显示

zCanvas.drawNStar(new Painter()
        .num(5)
        .R(20f)
        .r(10f)
        .fs(Color.YELLOW)
        .dp(mContext)
);

dp适配.png

公共属性展示到这里，持续更新，敬请关注更新时间：2018-09-12：10:25 LogicCanvas-项目地址：github

二、直线绘制：

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

1.单线条

 zCanvas.drawLines(
         new Painter()
                 .b(5f)
                 .ps(new Pos(0, 0), new Pos(200, -200))
 );

绘制单直线.png

2.多线条

zCanvas.drawLines(
        new Painter()
                .b(5f)
                .ps(
                        new Pos(0, 0),
                        new Pos(200, -200),
                        new Pos(200,-400),
                        new Pos(200,-400),
                        new Pos(800,-400),
                        new Pos(0,0)
                )
);

绘制多线条.png

三、绘制矩形：

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

zCanvas.drawRect(
        new Painter()
                .x(1000/2f).y(618/2f).r(50f)
                .b(5f).ss(Color.RED).p(new Pos(100,-100))
);

绘制矩形.png

四、画圆：

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

zCanvas.drawCircle(
        new Painter()
                .r(100f)
                .b(5f).ss(Color.RED)
                .p(new Pos(200,-200))

画圆.png

五、绘制弧线

zCanvas.drawArc(
        new Painter()
                .r(100f).ang(135f)
                .b(1f).ss(Color.RED)
                .p(new Pos(200,-100))
);

绘制弧线.png

六、正多边形和正多角形

for (int i = 5; i < 10; i++) {
    zCanvas.drawRegularPolygon(
            new Painter()
                    .num(i).R(80f)
                    .b(4f)
                    .p(new Pos(20+210*(i-5),-20)));
    zCanvas.drawRegularStar(
            new Painter()
                    .num(i).R(80f)
                    .b(4f)
                    .p(new Pos(20+210*(i-5),-220)));
}