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 fun createBlur(type: BlurType): DesignBlock.

fun createBlur(type: BlurType): DesignBlock

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:

  • BlurType.Uniform
  • BlurType.Linear
  • BlurType.Mirrored
  • BlurType.Radial
val radialBlur = engine.block.createBlur(type = BlurType.Radial)

Configuring a Blur

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

engine.block.setFloat(radialBlur, property = "radial/radius", value = 100F)

Functions

fun setBlur(
    block: DesignBlock,
    blurBlock: DesignBlock,
)

Connects block’s blur to the given blurBlock.

Required scope: “appearance/blur”

  • block: the block to update.

  • blurBlock: a blur block.

fun setBlurEnabled(
    block: DesignBlock,
    enabled: Boolean,
)

Enable or disable the blur of the given design block.

  • block: the block to update.

  • enabled: the new enabled value.

fun isBlurEnabled(block: DesignBlock): Boolean

Query if blur is enabled for the given block.

  • block: the block to query.

  • Returns true if the blur is enabled, false otherwise.

fun supportsBlur(block: DesignBlock): Boolean

Checks whether the block supports blur.

  • block: the block to query.

  • Returns true if the block supports blur, false otherwise.

fun getBlur(block: DesignBlock): DesignBlock

Get the blur block of the given design block.

  • block: the block to query.

  • Returns the blur block.

Full Code

Here’s the full code:

// Create and configure a radial blur
val radialBlur = engine.block.createBlur(type = BlurType.Radial)
engine.block.setFloat(radialBlur, property = "radial/radius", value = 100F)
engine.block.setBlur(block, blurBlock = radialBlur)
engine.block.setBlurEnabled(block, enabled = true)
val isBlurEnabled = engine.block.isBlurEnabled(block)


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