Blur

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

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

// Create and configure a radial blur
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);
engine.block.setBlur(block, radialBlur);
engine.block.setBlurEnabled(block, true);
const isBlurEnabled = engine.block.isBlurEnabled(block);

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.

Linear Type#

A blur effect applied along a linear gradient.

This section describes the properties available for the Linear Type (//ly.img.ubq/blur/linear) block type.

Mirrored Type#

A blur effect applied in a mirrored linear fashion.

This section describes the properties available for the Mirrored Type (//ly.img.ubq/blur/mirrored) block type.

Radial Type#

A blur effect applied radially from a center point.

This section describes the properties available for the Radial Type (//ly.img.ubq/blur/radial) block type.

Uniform Type#

A blur effect with uniform intensity.

This section describes the properties available for the Uniform Type (//ly.img.ubq/blur/uniform) block type.

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