Light

alexandrebonaventure / vue-zdog Goto Github PK

View Code? Open in Web Editor NEW

56.0 5.0 8.0 653 KB

Vue wrapper for zDog

Home Page: https://alexandrebonaventure.github.io/vue-zdog/

License: MIT License

JavaScript 100.00%

vuejs zdog 3d canvas engine3d

vue-zdog's Introduction

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>
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

vue-zdog's People

Contributors

Stargazers

Watchers

Forkers

bhaskar-nair2 vuchl skucza artskin jacasch h2atecnologia hnjerryluo

vue-zdog's Issues

Espose Zdog.TAU

Having the constant exposed for easier rotation handling would be useful

ZCylinder not rendering properly

ZCylinder does not render anything except, it seems, some very small strokes.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/zdog/dist/zdog.dist.min.js"></script>
    <script src="https://unpkg.com/[email protected]"></script>
</head>

<body>
    <div id="app"></div>

    <script type="text/javascript">
        const { ZIllustration, ZCylinder } = VueZDog;
        new Vue({
            components: {
                ZIllustration,
                ZCylinder
            },
            render(h) {
                const cyl = h(ZCylinder,{ props: {diameter: 500, length: 200, color: "#000", stroke: true}})
                return h(ZIllustration, {
                    props: {
                        resize: 'fullscreen',
                        dragRotate: true
                    },
                }, [cyl])
            }
        }).$mount('#app')
    </script>
</body>
</html>

Expose translate, rotate and scale default props from ZIllustration

To better contol the view of the result the default transforms of ZIllustraion should be exposed as props: https://zzz.dog/api#illustration-translate-rotate-scale

Zdog[shapeName] is not a constructor

Thanks Alexandre for this, declarative ZDog is awesome :)
Some shapes dont work, for example for ZPath or ZBox this error pops:

[Vue warn]: Error in created hook (Promise/async): "TypeError: Zdog[shapeName] is not a constructor"

You can reproduce here: https://codesandbox.io/s/vue-template-vjc7w
Some other shapes like ZCone seems to render the wrong shape.
Also the peer dependency vue-runtimes-helpers seems required.

Add ZGroup

An API for https://zzz.dog/api#group would be nice too!

dragRotate not quite working

somehow dragRotate doesn't work for me.

it works, when I add it to your example on github like this:

return h(ZIllustration, {
            props: {
              zoom: 1.5,
              resize: 'fullscreen',
              dragRotate: true //here
            },
            staticClass: "w-100 h-100",
            on: { tick: this.onTick }
          }, [anchor])

but not when I do it like this in one of my .vue files

<ZIllustration :dragRotate="true"> <!--here-->
    <ZShape :stroke="20" :path="[{x:-10},{x:10}]" />
</ZIllustration>

Am I doing something wrong or is this a bug?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.