search

CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.11k stars 1.97k forks source link

Is it possible to make webgl mask work in animation？ #1069

Open ajex-china opened 2 years ago

ajex-china commented 2 years ago

Is it possible to make webgl mask work in animation？

Matt-Maerz commented 2 years ago

Yes,

  1. add the mask to the container.
  2. cache teh container
  3. call .updateCache() from the container on every change.

Example:

let maskContainer = new createjs.Container(); ... let mask = new createjs.Shape(); mask.graphics.drawRect(0,0, sizeX, sizeY); maskContainer.mask = mask; .... maskContainer.addChild(scrollcontentContainer); .... maskContainer.cache( 0, 0, sizeX, sizeY); ... //On every change maskContainer.updateCache();