Effect Description

Effects in Wujie Cloud Video Editor are developed using Canvas and loaded into the project in a require mode. You only need to master 4 basic APIs.

github demo

Modular Configuration Instructions

Since we use modular development for effect plugins, we need to configure the modular loading address. Please refer to the Core-SDK parameter description to configure the EModuleEffectSourcePath module loading path.

Effect components use .txt files by default (for security reasons). You can set the parameter window.EModuleEffectSourcePathDev = true to load .js files (recommended for development environments).

API Description

You only need to master the following 4 basic APIs to develop effects:

• init(canvas, element, store, PIXI) Called when initializing the component
• play({relativeTime, duration, progress}) Called when playing the animation
• pause() Called when stopping playback
• destroy() Called after destruction

Take modular (moduleName.js) as an example:

/**
 * init(canvas, element, store, PIXI) Initialization function
 * play({relativeTime, duration, progress}) Animation playback function
 * pause() Pause
 * destroy() Destroy
 */
EModule.define("moduleName", [], function () {
  let ctx = null;
  let canvas = null;

  function init(cav) {
    canvas = cav;
    ctx = canvas.getContext("2d", { alpha: true });
  }

  function play({ relativeTime, duration, progress }) {
    console.log({ relativeTime, duration, progress });
  }

  function pause() {
    console.log("pause");
  }

  function destroy() {
    console.log("destroy");
  }

  return { init, play, pause, destroy };
});

init(canvas, element, store, PIXI) Initialization Trigger

Parameter description:

• canvas Called when initializing the effect component. The default incoming parameter is a canvas element. We just need to draw the effect on this canvas element.
• element JSON data of the effect element, storing parameter information
• store All parameters exposed by the rendering core. If multi-element linkage is needed, required parameters can be obtained from here
• PIXI pixijs package

play({ relativeTime, duration, progress }) Animation Playback Trigger

Repeatedly triggered when the cursor enters the effect component area.

Parameter description:

• relativeTime Relative time when the cursor sweeps through the element
• duration Total duration of the effect element
• progress Progress when the cursor sweeps through the element, equal to relative/duration

pause() Pause Trigger

Triggered when the cursor leaves the effect component area.

destroy() Destroy Trigger

Triggered when the effect component is deleted. At this time, the canvas can be deleted to prevent memory leaks