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