https://github.com/alexandrebonaventure/vue-zdog

Vue wrapper for zDog
https://github.com/alexandrebonaventure/vue-zdog

3d canvas engine3d vuejs zdog

Last synced: 3 months ago
JSON representation

Vue wrapper for zDog

• Host: GitHub
• URL: https://github.com/alexandrebonaventure/vue-zdog
• Owner: AlexandreBonaventure
• License: mit
• Created: 2019-06-15T22:23:46.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T06:39:54.000Z (about 2 years ago)
• Last Synced: 2024-10-02T02:24:02.888Z (4 months ago)
• Topics: 3d, canvas, engine3d, vuejs, zdog
• Language: JavaScript
• Homepage: https://alexandrebonaventure.github.io/vue-zdog/
• Size: 638 KB
• Stars: 56
• Watchers: 5
• Forks: 8
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-zdog

Vue wrapper for [zDog](https://github.com/metafizzy/zdog)

# Demo

## [See here](https://alexandrebonaventure.github.io/vue-zdog)

[source](https://github.com/AlexandreBonaventure/vue-zdog/blob/master/examples/index.html)

# 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](https://github.com/AlexandreBonaventure/vue-zdog/blob/master/examples/index.html))

# Usage

## with Vue-CLI

Import components and use them in the template

```js

import { ZIllustration, ZRect} from 'vue-zdog'

export default {

  components: {

    ZIllustration,

    ZRect

  },

}

  

    

  

```

# 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](https://zzz.dog/shapes)