AndroidZdog: Android平台上的伪3D图形动画引擎Zdog，使用kotlin编写

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

AndroidZdog

开源软件地址：

https://gitee.com/prostory/AndroidZdog

开源软件介绍：

AndroidZdog

Porting Zdog(Round, flat, designer-friendly pseudo-3D engine for canvas) to Android with kotlin

Table of content

Getting started
- Gradle
- Maven
What can it do?
Usage
- Contrast with Zdog
- Display shapes in ImageView
Extended features

Getting started

Gradle

Step 1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

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

Step 2. Add the dependency

	dependencies {	        implementation 'com.github.prostory:AndroidZdog:v1.0.0'	}

Maven

Step 1. Add the JitPack repository to your build file

	<repositories>		<repository>		    <id>jitpack.io</id>		    <url>https://jitpack.io</url>		</repository>	</repositories>

Step 2. Add the dependency

	<dependency>	    <groupId>com.github.prostory</groupId>	    <artifactId>AndroidZdog</artifactId>	    <version>v1.0.0</version>	</dependency>

What can it do?

Simple graphics and animation

Basic Shapes	Extended Features	Dynamic icons

More complex graphics and animations

Day	Night	Rotate

Usage

Contrast with Zdog

Line

For Zdog

// linenew Zdog.Shape({  addTo: illo,  path: [    { x: -40 }, // start at 1st point    { x:  40 }, // line to 2nd point  ],  stroke: 20,  color: '#636',});

// z-shapenew Zdog.Shape({  addTo: illo,  path: [    { x: -32, y: -40 }, // start at top left    { x:  32, y: -40 }, // line to top right    { x: -32, y:  40 }, // line to bottom left    { x:  32, y:  40 }, // line to bottom right  ],  closed: false,  stroke: 20,  color: '#636',});

// 3D shapenew Zdog.Shape({  addTo: illo,  path: [    { x: -32, y: -40, z:  40 },    { x:  32, y: -40 },    { x:  32, y:  40, z:  40 },    { x:  32, y:  40, z: -40 },  ],  closed: false,  stroke: 20,  color: '#636',});

For AndroidZdog

// lineshape {    addTo = illo    path(        move(x = -40f), // start at 1st point        line(x = 40f)   // line to 2nd point    )    stroke = 20f    color = "#636"}

// z-shapeshape {    addTo = illo    path(        move(x = -32f, y = -40f), // start at top left        line(x = 32f, y = -40f),  // line to top right        line(x = -32f, y = 40f),  // line to bottom left        line(x = 32f, y = 40f)    // line to bottom right    )    closed = false    stroke = 20f    color = "#636"}

// 3D shapeshape {    addTo = illo    path(        move(x = -32f, y = -40f, z = 40f),        line(x = 32f, y = -40f),        line(x = 32f, y = 40f, z = 40f),        line(x = 32f, y = 40f, z = -40f)    )    closed = false    stroke = 20f    color = "#636"}

Shapes
line z-shape 3D shape

Arc

For Zdog

new Zdog.Shape({  addTo: illo,  path: [    { x: -60, y: -60 },   // start    { arc: [      { x:  20, y: -60 }, // corner      { x:  20, y:  20 }, // end point    ]},    { arc: [ // start next arc from last end point      { x:  20, y:  60 }, // corner      { x:  60, y:  60 }, // end point    ]},  ],  closed: false,  stroke: 20,  color: '#636'});

For AndroidZdog

shape {    addTo = illo    path(        move(x = -60f, y = -60f),		// start        arc(            vector(x = 20f, y = -60f),	// corner            vector(x = 20f, y = 20f)	// end point        ),        arc(				// start next arc from last end point            vector(x = 20f, y = 60f),	// corner            vector(x = 60f, y = 60f)	// end point        )    )    closed = false    stroke = 20f    color = "#636"}

Shapes

Bezier

For Zdog

new Zdog.Shape({  addTo: illo,  path: [    { x: -60, y: -60 },   // start    { bezier: [      { x:  20, y: -60 }, // start control point      { x:  20, y:  60 }, // end control point      { x:  60, y:  60 }, // end point    ]},  ],  closed: false,  stroke: 20,  color: '#636'});

For AndroidZdog

shape {    addTo = illo    path(        move(x = -60f, y = -60f),		// start        bezier(            vector(x = 20f, y = -60f),	// start control point            vector(x = 20f, y = 60f),	// end control point            vector(x = 60f, y = 60f)	// end point        )    )    closed = false    stroke = 20f    color = "#636"}

Shapes

Closed

For Zdog

// Closednew Zdog.Shape({  addTo: illo,  path: [ // triangle    { x:   0, y: -40 },    { x:  40, y:  40 },    { x: -40, y:  40 },  ],  // closed by default  stroke: 20,  color: '#636'});

// Unclosednew Zdog.Shape({  addTo: illo,  path: [    { x:   0, y: -40 },    { x:  40, y:  40 },    { x: -40, y:  40 },  ],  closed: false, // unclosed  stroke: 20,  color: '#636'});

For AndroidZdog

// Closedshape {    addTo = illo    path( // triangle        move(x = 0f, y = -40f),        line(x = 40f, y = 40f),        line(x = -40f, y = 40f)    )    // closed by default    stroke = 20f    color = "#636"}

// Unclosedshape {    addTo = illo    path( // triangle        move(x = 0f, y = -40f),        line(x = 40f, y = 40f),        line(x = -40f, y = 40f)    )    closed = false // unclosed    stroke = 20f    color = "#636"}

Shapes
Closed Unclosed

Hemisphere

For Zdog

let dome = new Zdog.Hemisphere({  addTo: illo,  diameter: 120,  // fill enabled by default  // disable stroke for crisp edge  stroke: false,  color: '#C25',  backface: '#EA0',});

For AndroidZdog

val demo = hemisphere {    addTo = illo    diameter = 120f    // fill enabled by default  	// disable stroke for crisp edge    stroke = 0f // zero for no stroke    color = "#C25"    backface = "#EA0"}

Shapes

Cone

For Zdog

let partyHat = new Zdog.Cone({  addTo: illo,  diameter: 70,  length: 90,  stroke: false,  color: '#636',  backface: '#C25',});

For AndroidZdog

val partyHat = cone {    addTo = illo    diameter = 70f    length = 90f    stroke = 0f // zero for no stroke    color = "#636"    backface = "#C25"}

Shapes

Cylinder

For Zdog

let can = new Zdog.Cylinder({  addTo: illo,  diameter: 80,  length: 120,  stroke: false,  color: '#C25',  frontFace: '#EA0',  backface: '#636',});

For AndroidZdog

val can = cylinder {    addTo = illo    diameter = 80f    length = 120f    stroke = 0f // zero for no stroke    color = "#C25"    frontFace = "#EA0"    backface = "#636"}

Shapes

Box

For Zdog

let box = new Zdog.Box({  addTo: illo,  width: 120,  height: 100,  depth: 80,  stroke: false,  color: '#C25', // default face color  leftFace: '#EA0',  rightFace: '#E62',  topFace: '#ED0',  bottomFace: '#636',});

For AndroidZdog

val box = box {    addTo = illo    width = 120f    height = 100f    depth = 80f    stroke = 0f    color = "#C25" // default face color    leftFace = "#EA0"    rightFace = "#E62"    topFace = "#ED0"    bottomFace = "#636"}

Shapes

Z-fighting

For Zdog

const distance = 40;let dot = new Zdog.Shape({  addTo: illo,  translate: { y: -distance },  stroke: 80,  color: '#636',});dot.copy({  translate: { x: -distance },  color: '#EA0',});dot.copy({  translate: { z: distance },  color: '#C25',});dot.copy({  translate: { x: distance },  color: '#E62',});dot.copy({  translate: { z: -distance },  color: '#C25',});dot.copy({  translate: { y: distance },});

For AndroidZdog

val distance = 40fval dot = shape {    addTo = illo    translate(y = -distance)    stroke = 80f    color = "#636"}dot.copy {    translate(x = -distance)    color = "#EA0"}dot.copy {    translate(z = distance)    color = "#C25"}dot.copy {    translate(x = distance)    color = "#E62"}dot.copy {    translate(z = -distance)    color = "#C25"}dot.copy {    translate(y = distance)}

Shapes

Display shapes in ImageView

It's very simple to display Shapes in ImageView. You just need to create shapes, add shapes to ZdogDrawable, and then call the setImageDrawable method of ImageView to display ZdogDrawable.

// Attach shapes to ZdogDrawable and set animationsval drawable = ZdogDrawable().apply {     // Create a shape     shape {        addTo = illo // add to ZdogDrawable        path(            move(x = -32f, y = -40f),            line(x = 32f, y = -40f),            line(x = -32f, y = 40f),            line(x = 32f, y = 40f)        )        closed = false        stroke = 20f        color = "#636"    }    // Set animations, rotate the Illustration    play(illo.rotateTo(y = TAU.toFloat()).duration(3000).repeat())}// Attach ZdogDrawable to ImageViewimageView.setImageDrawable(drawable)// Start animationdrawable.start()