Skip to content

Latest commit

 

History

History
223 lines (177 loc) · 4.81 KB

README.md

File metadata and controls

223 lines (177 loc) · 4.81 KB
Raw

SketchyComponent

Language: 中文 | 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