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

零、前言:

安卓图形绘制一直以来感觉都很繁琐

在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)));
}
绘制正多边形和正多角星.png
多角星分析图

展示到这里,持续更新,更多功能敬请期待

更新时间:2018-09-12:13:25

LogicCanvas-项目地址:github


本文由张风捷特烈原创,转载请注明

更多安卓技术欢迎访问:https://www.jianshu.com/c/004f3fe34c94

张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com

你的喜欢与支持将是我最大的动力

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 1.1 background-size设置背...

3688
来自专栏练小习的专栏

浏览器亚像素渲染与小数位的取舍

在响应式项目中,百分比的数值的应用越来越多,比如栅格化布局、背景定位、内边距等。以往对于这种数值,我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长,...

2015
来自专栏偏前端工程师的驿站

CSS魔法堂:深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vert...

2958
来自专栏前端知识分享

第97天:CSS3渐变和过渡详解

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

993
来自专栏lonelydawn的前端猿区

canvas星空的2d绘制示例

一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

2099
来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

932
来自专栏Android知识点总结

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

1162
来自专栏小李刀刀的专栏

前台开发从头说起:理解css盒模型

在掌握了丰富而强大的css选择符之后,就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了,接下来就需要熟练掌握规则的制定方法——什么样的属性...

3467
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

2118
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

1071

扫码关注云+社区