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?
  • The basic shapes
  • The dynamic icons
  • More complex graphics and animations
• Usage
  • Contrast with Zdog
  • Display shapes in ImageView
• Extended features
  • Segment
  • Path Effect
  • Gradient
  • Shadow
  • Path Animation
  • Real-time update path

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

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

    // z-shape
    new 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 shape
    new 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

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

    // z-shape
    shape {
        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 shape
    shape {
        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

    // Closed
    new 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'
    });
    

    // Unclosed
    new 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

    // Closed
    shape {
        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"
    }
    

    // Unclosed
    shape {
        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