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

零、前言:

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

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


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

implementation 'com.github.toly1994328:logic-canvas-android:0.06'
点类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)////内接圆半径

五角星演示.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"

填充样式

-

dir

逆时针方向

方向

-

1.位移:

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

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

位移p.png


2.坐标系:为了支持坐标系,可是煞费苦心啊!

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

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

坐标系coo.png


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)//描边线条粗细
);

描边,颜色.png


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

rot 旋转 参数类型:Float

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

旋转.png

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

缩放.png


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

修改参照点放大.png


7.填充

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

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

填充.png


公共属性展示到这里


二、直线绘制:

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

1.单线条
painter.draw(
        new ShapeLine()
                .ps(pos.clone(0, 0), pos.clone(200, -200))
                .b(5f)
);

绘制单直线.png


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

绘制多线条.png


三、绘制矩形:

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

绘制矩形.png


四、画圆:

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

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

画圆.png


五、绘制弧线

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

绘制弧线.png


六、绘制文字:

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

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

文字al属性.png


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

与安卓Path结合.png


八、正多边形和正多角形

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)));//内接圆半径
}

绘制正多边形和正多角星.png

多角星分析图

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


后记、

1.声明:

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章鱼的慢慢技术路

使用Photoshop实现雪花飘落的效果

19740
来自专栏IMWeb前端团队

css3的学习笔记

适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和...

19250
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

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

22480
来自专栏everhad

Android自定义评分控件:RatingStarView

RatingStarView Android自定义的评分控件,类似RatingBar那样的,使用星星图标(full、half、empty)作为rating值的“...

43390
来自专栏Android开发经验

Android自定义View-记录一个简单却又常见的效果实现

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

7820
来自专栏HTML5学堂

CSS3蒙版 — 元旦快乐!

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果,可我们在这里并不打算介绍PS的蒙版效果,而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-w...

397100
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

56360
来自专栏知晓程序

开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

14540
来自专栏向治洪

android绘制虚线

有的时候我们需要一种虚线效果,比如图片的边框,愤怒的小鸟的飞翔路径,那么怎么绘制这些虚线呢?方法很多,目前我觉得好的有两种: 一、自己创建模式,一个点一个点的绘...

27260
来自专栏Thinks

带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。

18620

扫码关注云+社区

领取腾讯云代金券