vue-zdog
Vue wrapper for zDog
Demo
See here
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> 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
Auto-rendering
WIP
Z{shape}
)
Shapes (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