登录

去注册 忘记密码?

登录

注册

去登录

  • 扫码关注公众号
  • 发送“我爱安卓
  • 即可获取验证码

注册

解锁回答区域

  • 扫码关注公众号
  • 发送“我爱安卓

若你登陆,将永久解锁;
若未登录,仅本机解锁。

解锁回答区域

获取注册验证码

  • 扫码关注公众号
  • 发送“我爱安卓
  • 即可获取验证码

一款手绘风格的组件库

m-zylab   2021-01-19 01:08   收藏

SketchyComponent

Languate: 中文](./README-CN.md) | [English

logo

What is SketchyComponent

SketchyComponent is a set of sketchy style components.

We provide basic sketchy shapes and some icons.
Here are some examples:
demo demo demo demo

Try

Download Demo APK

Quick Start

Install

  1. add jcenter to repositories
repositories {
    jcenter()
}
  1. add sketchy to dependencies
implementation 'com.zylab:sketchy:0.1.3'

How to use

// 1. new SkDrawable
val skSquareDrawable = SkSquareDrawable().apply {
    // 2. set props
    fillColor = resources.getColor(android.R.color.holo_orange_dark)
}
// 3. set the background of View 
text.background = skSquareDrawable

Update

Latest version

0.1.3

0.1.3

Complete basic functions.

Introduce

Basic Model

SkPoint

Represents a point in the drawing.
* Props
x: Double
y: Double

SkBezier

Represents a first order Bezier curve.
* Props
startPoint: SkPoint
controlPoint: SkPoint
endPoint: SkPoint

Basic Drawable

SkDrawable

The base class of other SkDrawables.
* Props
width: Double
height: Double
borderColor: Int
fillColor: Int
bgColor: Int

SkSquareDrawable

A drawable of square.
pic

  • props
    startPoint: SkPoint (The default value is (0, 0))
    squareWidth: Double (The default value is the width of drawable)
    squireHeight: Double (The default value is the height of drawable)
SkLineDrawable

A drawable of line.
pic

  • Props
    startPoint: SkPoint (The default value is (0, 0))
    endPoint: SkPoint (The default value is (0, Drawable width))
SkCircleDrawable

A drawable of circle.
pic

  • Props
    center: SkPoint (The default value is (width of drawable / 2, height of drawable / 2))
    radius: Double (The default value is min(width of drawable / 2, height of drawable / 2))
SkArcDrawable

A drawable of arc.
pic

  • Props
    center: SkPoint
    radius: Double
    startAngle: Double
    sweepAngle: Double
    linkCenter: Boolean (Whether if line to center)
SkImgDrawable

A drawable of images.
pic

  • 属性
    img: Drawable
    style: Int (STYLE_CIRCLE and STYLE_SQUARE)

Basic Icon

SkTimeIcon

pic

SkSearchIcon

pic

SkListIcon

pic

SkArrowIcon

pic pic pic pic pic pic

  • Props
    style: Int (STYLE, STYLE1)
    direction: Int (UP, DOWN, LEFT, RIGHT)

pic pic

Basic Shape

We also provide custom capabilities by some basic shapes. So You can draw something you want using these shapes.
Here are some examples.

pic pic pic

How to use

All basic shapes inherit from SkShape. There are two important functions -- SkShape#parse() and SkShape#draw(canvas: Canvas).
SkShape#parse used to generate paths of graphics.
SkShape#draw used to draw paths to canvas. It will call parse if paths are not generated.
Take SkLine as an example:

// 1. new SkLine 
val line = SkLine()
// 2. set props
line.startPoint = SkPoint(0.0, 0.0)
line.endPoint = SkPoint(100.0, 100.0)
// 3. draw to canvas
line.draw(canvas)
SkShape

The base class of shapes.
* Props
borderColor: Int
fillColor: Int
bgColor: Int

SkSquare

A shape of square.
pic

  • Props
    startPoint: SkPoint
    width: Double
    height: Double
SkLine

A shape of line.
pic

  • Props
    startPoint: SkPoint
    endPoint: SkPoint
SkCircle

A shape of circle.
pic

  • Props
    center: SkPoint
    radius: Double
SkArc

A shape of arc.
pic

  • Props
    center: SkPoint
    radius: Double
    startAngle: Double
    sweepAngle: Double
    linkCenter: Boolean
SkCircleImg

A shape of circle images.
pic

  • Props
    center: SkPoint
    radius: Double
    img: Drawable
SkSquareImg

A shape of square images.
pic

  • Props
    startPoint: SkPoint
    width: Double
    height: Double
    img: Drawable

About

Any questions or suggestions, welcome to feedback:
Email:zy5a59@outlook.com
Wechat:zy_lab

项目地址:https://github.com/m-zylab/SketchyComponent