Skip to content
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src add rotate/scale/translate to Zillustration (fix #5) Jul 2, 2019
.gitignore initial version Jun 17, 2019
LICENSE
README.md
bili.config.js initial version Jun 17, 2019
package.json upgrade package (fix lodash vulnerability) Jul 13, 2019
yarn.lock upgrade package (fix lodash vulnerability) Jul 13, 2019

README.md

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

You can’t perform that action at this time.