以前看到一位做者开源了一款手绘风格的图表库 Chart.xkcd,感受非常喜欢。
固然仅仅图表是知足不了我滴,因而想看看 Android 上是否有相似的开源库,一番搜索以后,颗粒无收。
想一想原理可能不是太难,因而花点时间动手写了一个。java
成果以下:
android
想快速体验一把,能够下载 Demo APK ~git
SketchyComponent,一款手绘风格的 Android 组件库。
仓库地址:github.com/m-zylab/Ske…github
repositories {
jcenter()
}
复制代码
implementation 'com.zylab:sketchy:0.1.3'
复制代码
// 1. 建立 Sketchy 图形
val skSquareDrawable = SkSquareDrawable().apply {
// 2. 设置属性
fillColor = resources.getColor(android.R.color.holo_orange_dark)
}
// 3. 给 View 设置背景
text.background = skSquareDrawable
复制代码
就是这么 easy ~canvas
目前 SketchyComponent 提供了基础图形的 Drawable,一部分 Icon,以及用来自定义图形的基础功能。
下面分别介绍一下~bash
绘制一个矩形,效果以下:
app
绘制一个线形,效果以下:
spa
绘制一个圆形,效果以下:
3d
绘制一个扇形,效果以下:
code
绘制图片,效果以下:
咱们提供了一些基础图形,方便用来自定义一些效果。下面是一些自定义的示例。
咱们提供的基础图形,均继承自 SkShape
,其中提供了两个方法,SkShape#parse
和 SkShape#draw(canvas: Canvas)
SkShape#parse 方法用来生成图形对应的路径
SkShape#draw 方法用来将图形绘制到 canvas,若是在绘制时路径尚未生成,即 parse 方法还未调用,默认会调用 parse 方法
以绘制直线为例:
// 建立 SkLine
val line = SkLine()
// 设置属性
line.startPoint = SkPoint(0.0, 0.0)
line.endPoint = SkPoint(100.0, 100.0)
// 进行绘制
line.draw(canvas)
复制代码
具体的 SkShape 介绍以下:
绘制一个矩形
绘制一条线
绘制一个圆
绘制扇形
绘制一个圆形图片
绘制一个矩形图片
更多用法请参照 github.com/m-zylab/Ske… 以及 github.com/m-zylab/Ske…