Skip to content
A vue adaptation of paper.js
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.
docs refactor to use ci & fix compound path definition May 23, 2019
public
src fix implicit any in declaration file May 24, 2019
.browserslistrc
.gitignore
.travis.yml fix typo May 23, 2019
LICENSE
README.md refactor to use ci & fix compound path definition May 23, 2019
babel.config.js
package.json
postcss.config.js
tsconfig.json refactor to use ci & fix compound path definition May 23, 2019
tslint.json
vue.config.js

README.md

paper-vueify

Build State Coverage License Version

Introduction

Paper.js is a very useful tool for creating complicate canvas shapes and animations. But using paper.js for tasks such as data visualiztion is not very convenient, and could produce many redundant code lines. On the other hand, Vue is data-driven framework and it's extremely friendly to data related operations. By combining these two powerful tools result a really nice workflow for data visualization and lightweight data-driven animation editing. That's the purpose of paper-vueify.

Install

The recommended way to install and maintain paper-vueify in your project is through the Node.js Pacakge Manager (NPM), simply type the npm command in your project folder:

npm install --save paper-vueify

If you are using typescript environment, you may also need to install paper's declaration files:

npm install --save-dev @types/paper

Usage

Vue only works properly with plain object, the library comes with a series of redefinition of basic paper object, and the parameters of each object is almost identical to the original.
To use paper-vueify, you may import component manually or use the installer to register all the components.

import Vue from 'vue'
import paper from 'paper'
import PaperVueify from 'paper-vueify'

// the install process register 3 components into the global scope, p-canvas, p-item and p-symbol-definition
// the secondary parameter paper is to register your paper variable in current scope, or there will be two seperated PaperScope and the p-canvas will not work properly.
Vue.use(PaperVueify, paper)

Demo

In demo folder, you can see some basic plays with paper-vueify. With the data-reactive framework, it's easy to create very complicate canvas structure and animation (Though, it's not very suitable for very large scale graphic project).
Use following command to build demo into the docs folder (for github pages).

npm run build:demo

Preview The demos come with the docs of this project, You can view the demos on my Github Pages.

And you may find the api reference here.

License

Distributed under the MIT license. See LICENSE for detail.

You can’t perform that action at this time.