{"id":20763705,"url":"https://github.com/glenzli/paper-vueify","last_synced_at":"2025-04-30T07:50:12.606Z","repository":{"id":37719011,"uuid":"180908207","full_name":"glenzli/paper-vueify","owner":"glenzli","description":"A vue adaptation of paper.js","archived":false,"fork":false,"pushed_at":"2022-12-10T18:48:38.000Z","size":8923,"stargazers_count":21,"open_issues_count":28,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-30T07:50:05.315Z","etag":null,"topics":["animation","canvas","paper","paper-vueify","paperjs","visualization","vue"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glenzli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-12T01:41:27.000Z","updated_at":"2023-09-25T11:07:18.000Z","dependencies_parsed_at":"2023-01-26T06:15:12.703Z","dependency_job_id":null,"html_url":"https://github.com/glenzli/paper-vueify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenzli%2Fpaper-vueify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenzli%2Fpaper-vueify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenzli%2Fpaper-vueify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glenzli%2Fpaper-vueify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glenzli","download_url":"https://codeload.github.com/glenzli/paper-vueify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251666227,"owners_count":21624291,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas","paper","paper-vueify","paperjs","visualization","vue"],"created_at":"2024-11-17T10:45:40.298Z","updated_at":"2025-04-30T07:50:12.587Z","avatar_url":"https://github.com/glenzli.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# paper-vueify\n![Build State](https://img.shields.io/travis/glenzli/paper-vueify.svg?style=flat-square)\n![Coverage](https://img.shields.io/codecov/c/github/glenzli/paper-vueify.svg?style=flat-square)\n![License](https://img.shields.io/github/license/glenzli/paper-vueify.svg?color=%23333\u0026style=flat-square)\n![Version](https://img.shields.io/github/package-json/v/glenzli/paper-vueify.svg?style=flat-square)\n## Introduction\n**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**. **paper-vueify** is updated with the new official decalartions of **paper.js**.\n\n## Install\nThe 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:\n\n```sh\nnpm install --save paper-vueify\n```\nBegin with **v1.1.5**, **paper-vueify** is synced with the newest official declarations of **paper.js v0.12.1**, since there are some differences between the **@types/paper** and the official one, PLEASE always use the official declarations in your typescript project and uninstall the **@types/paper** library, or you will get some complie errors.\n\n## Usage\nVue 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.\n\u003cbr/\u003eTo use paper-vueify, you may import component manually or use the installer to register all the components.\n```javascript\nimport Vue from 'vue'\nimport paper from 'paper'\nimport PaperVueify from 'paper-vueify'\n\n// the install process register 3 components into the global scope, p-canvas, p-item and p-symbol-definition\n// 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.\nVue.use(PaperVueify, paper)\n```\n\n## Demo\nIn 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).\n\u003cbr/\u003eUse following command to build demo into the docs folder (for github pages).\n```sh\nnpm run build:demo\n```\n![Preview](/public/preview.jpg)\nThe demos come with the docs of this project, You can view the demos on my [Github Pages](https://glenzli.github.io/paper-vueify/).\n\nAnd you may find the [api reference here](https://glenzli.github.io/paper-vueify/api/).\n\n## License\nDistributed under the MIT license. See [LICENSE](https://github.com/glenzli/paper-vueify/blob/master/LICENSE) for detail.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglenzli%2Fpaper-vueify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglenzli%2Fpaper-vueify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglenzli%2Fpaper-vueify/lists"}