Skip to content

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.

Creating a Blur

To create a blur, simply use createBlur.

createBlur(type: BlurType): DesignBlockId

Create a new blur, fails if type is unknown or not a valid blur type.

  • type: The type id of the block.
  • Returns The handle of the newly created blur.

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'.

const radialBlur = engine.block.createBlur('radial');

Configuring a Blur

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

engine.block.setFloat(radialBlur, 'radial/radius', 100);

Functions

setBlur(id: DesignBlockId, blurId: DesignBlockId): void

Connects block’s blur to the given blur block. Required scope: ‘appearance/blur’

  • id: The block to update.
  • blurId: A ‘blur’ block.
setBlurEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the blur of the given design block.

  • id: The block to update.
  • enabled: The new enabled value.
isBlurEnabled(id: DesignBlockId): boolean

Query if blur is enabled for the given block.

  • id: The block to query.
  • Returns True, if the blur is enabled. False otherwise.
supportsBlur(id: DesignBlockId): boolean

Checks whether the block supports blur.

  • id: The block to query.
  • Returns True, if the block supports blur.
getBlur(id: DesignBlockId): DesignBlockId

Get the ‘blur’ block of the given design block.

  • id: The block to query.
  • Returns The ‘blur’ block.

Full Code

Here’s the full code:

// 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);
const isBlurEnabled = engine.block.isBlurEnabled(block);


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