Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

vue-zdog

Vue wrapper for zDog

Demo

See here

source

Installation

yarn add vue-zdog This plugin requires Vue and zDog as a peer dependencie. If you are using a bundler please make sure to add them to your package.json / if you are using it directly in the browser make sure those two are loaded before vue-zdog (see example source here)

Usage

with Vue-CLI

Import components and use them in the template

<script>
import { ZIllustration, ZRect} from 'vue-zdog'

export default {
  components: {
    ZIllustration,
    ZRect
  },
}
</script>

<template>

  <ZIllustration>
    <ZRect :stroke="20" color="red" :translate="{ x: 20, y: 40 }"/>
  </ZIllustration>

</template>

API

ZIllustration

This is the root component under which all the shapes will be created

props

  • svg
  • resize
  • dragRotate
  • zoom
  • centered
  • translate
  • rotate
  • scale

Auto-rendering

WIP

Shapes (Z{shape})

vue-zdog is meant to expose as vue components all the shapes provided by zdog:

  • Anchor
  • Group
  • Rect
  • RoundedRect
  • Ellipse
  • Polygon
  • Shape
  • Hemisphere
  • Cone
  • Cylinder
  • Box

NB: it will be provided be vue-zdog as Z{shape} (prefixed by Z) ie: Box -> ZBox

In order to use them you'll have to nest them under a root ZIllustration

props

see zdog API doc

Releases

No releases published

Packages

No packages published