README.custom-filters.md

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