Skip to main content
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.

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

Configuring a Blur#

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

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.