Vego is a Vue based library which apply MVVM (Model–view–viewmodel) to HTML5 canvas 2D programing. It provides a bunch of features allow you manipulate graphics like writing Vue components to manipulate DOMs. And it also provides a event mixin to mimic mo
npm install vegoVego is a Vue based library which apply MVVM (Model–view–viewmodel) to HTML5 canvas 2D programing. It provides a bunch of features allow you manipulate graphics like writing Vue components to manipulate DOMs. And it also provides a event mixin to mimic mouse interactions events.
It is designed for building reusable canvas components used for tiny games or simple data visualization or other requirements bringing canvas in Vue project.
``
npm install vego
#### Step 1. Use plugin
`javascript
import Vego from 'vego';
Vue.use(Vego, {
/*
* mouseover firing frequency
* set 0 to disable mouseover
*
* The larger the value, the smaller the CPU usage.
* default: 20ms
*/
enableMouseOver: 5,
/*
* Set true to enable touch and disable mouse event
* default: false
*/
enableTouch: false,
});
// other initialize
`
#### Step 2. Create a canvas component
`vue
`
#### Step 3. Apply canvas component within tag vego-canvas
`vue
:key="i"
:geox="x"
:geoy="y + 20*i "
:reg-x="regX"
:reg-y="regY"
:rotation="rotation"
:r="r"
:color="color"
@mouseenter="enterHandler"
@mouseleave="leaveHandler">
``
Demo: './examples_beta'
vego-canvas: canvas wrapper. It has width, height properties and basic events emiters. And it can fit different devicePixelRatio. All components within this tag must implement draw function which named as canvas components.
VegoComponent: canvas component mixin which mixin basic geometry properties into ordinary components.
Graphic: A thin wrapper for CanvasRenderingContext2D API which implement method chaining pattern.
Copyright (c) 2018-present Tony Wang