https://github.com/dankuck/vue-easeljs
A Vue.js plugin to control an HTML5 canvas using EaselJS
https://github.com/dankuck/vue-easeljs
Last synced: 3 months ago
JSON representation
A Vue.js plugin to control an HTML5 canvas using EaselJS
- Host: GitHub
- URL: https://github.com/dankuck/vue-easeljs
- Owner: dankuck
- License: mit
- Created: 2017-08-07T03:10:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-01-19T15:57:07.000Z (about 4 years ago)
- Last Synced: 2025-09-23T05:49:26.177Z (6 months ago)
- Language: JavaScript
- Size: 17.9 MB
- Stars: 94
- Watchers: 6
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.custom-filters.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - vue-easeljs - 对HTML5 canvas元素的数据驱动控制. (UI组件 / 帆布)
- awesome-vue - vue-easeljs - Data-driven control over an HTML5 canvas element. (UI Components / Canvas)
- awesome-vue - vue-easeljs - A Vue.js plugin to control an HTML5 canvas using EaselJS ` 📝 a year ago` (UI Components [🔝](#readme))
- awesome-vue - vue-easeljs - Data-driven control over an HTML5 canvas element. (UI Components / Canvas)
- awesome-vue - vue-easeljs - Data-driven control over an HTML5 canvas element. (Components & Libraries / UI Components)
README
## Custom filters
Create new filters by registering a class with the VueEaseljs library at
runtime using the `VueEaseljs.registerFilter` method.
| Parameter | |
| ----- | ---- |
| name | the name for the filter |
| Filter | the class that filters |
When the filter is used in an element's `filters` prop, the extra values are
passed to the filter's constructor method.
The filter should have one of two methods: either `adjustContext` or
`adjustImageData`.
### adjustContext
| Parameter | |
| --------- | --- |
| ctx | a CanvasRenderingContext2D that contains the visual element |
| x | the x coordinate of the element on ctx |
| y | the y coordinate of the element on ctx |
| width | the width of the element on ctx |
| height | the height of the element on ctx |
| targetCtx | the CanvasRenderingContext2D to draw to, if absent, use ctx |
| targetX | the x coordinate to draw to, if absent, use x |
| targetY | the y coordinate to draw to, if absent, use y |
This method should make changes to the data in `ctx` and write them to
`targetCtx` if present, or else back to `ctx`.
This method must return `true` if it succeeded.
### adjustImageData
| Parameter | |
| --------- | --- |
| imageData | an ImageData object |
This method should make changes directly to the `imageData` object.
This method must return `true` if it succeeded.
Example:
```
const VueEaseljs = require('vue-easeljs');
class MyFilter {
constructor(value1, value2) {
...
}
adjustContext(ctx, x, y, width, height, targetCtx, targetX, targetY) {
...
}
}
VueEaseljs.registerFilter('MyFilter', MyFilter);
```