Skip to content

Latest commit

 

History

History
86 lines (58 loc) · 1.56 KB

README.md

File metadata and controls

86 lines (58 loc) · 1.56 KB
Raw

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