Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Platform:
Language:

Blur

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a block's blur through the block API. Blurs can be added to any shape or page. You can create and configure individual blurs and apply them to blocks. Blocks support at most one blur at a time. The same blur may be used for different blocks at the same time.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Creating a Blur#

To create a blur, simply use createBlur(type: string): number.

We currently support the following blur types:

  • '//ly.img.ubq/blur/uniform'
  • '//ly.img.ubq/blur/linear'
  • '//ly.img.ubq/blur/mirrored'
  • '//ly.img.ubq/blur/radial'

Note: Omitting the prefix is also accepted, e.g. 'uniform' instead of '//ly.img.ubq/blur/uniform'.

Configuring a Blur#

You can configure blurs just like you configure design blocks. See Modify Properties for more detail.

Functions#

  • setBlur(block: number, blur: number): void applies a blur to a design block. It's up to you to destroy the blur that was previously applied to the block. If blur is enabled for the block, the blur is immediately visible.

  • setBlurEnabled(block: number, enabled: boolean): void disables the blur temporarily.

  • isBlurEnabled(block: number): boolean checks whether it is enabled.

  • hasBlur(block: number): boolean checks if a block supports blur.
  • getBlur(block: number): number gives access to an existing blur.
File:
// Create and configure a radial blur
const radialBlur = engine.block.createBlur('radial');
engine.block.setFloat(radialBlur, 'radial/radius', 100.);
engine.block.setBlur(block, radialBlur);
engine.block.setBlurEnabled(block, true);


// Access an existing blur
if (engine.block.hasBlur(block)) {
  const existingBlur = engine.block.getBlur(block);
}