Skip to main content
Platform
Language

Modify Appearance

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a blocks appearance through the block API.

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.

Common Properties#

Common properties are properties that occur on multiple block types. For instance, fill color properties are available for all the shape blocks and the text block. That's why we built convenient setter and getter functions for these properties. So you don't have to use the generic setters and getters and don't have to provide a specific property path. There are also has* functions to query if a block supports a set of common properties.

Opacity#

Set the translucency of the entire block.

supportsOpacity(id: DesignBlockId): boolean

Query if the given block has an opacity.

  • id: The block to query.
  • Returns true, if the block has an opacity.
setOpacity(id: DesignBlockId, opacity: number): void

Set the opacity of the given design block. Required scope: 'layer/opacity'

  • id: The block whose opacity should be set.
  • opacity: The opacity to be set. The valid range is 0 to 1.
getOpacity(id: DesignBlockId): number

Get the opacity of the given design block.

  • id: The block whose opacity should be queried.
  • Returns The opacity.

Blend Mode#

Define the blending behavior of a block.

supportsBlendMode(id: DesignBlockId): boolean

Query if the given block has a blend mode.

  • id: The block to query.
  • Returns true, if the block has a blend mode.
setBlendMode(id: DesignBlockId, blendMode: BlendMode): void

Set the blend mode of the given design block. Required scope: 'layer/blendMode'

  • id: The block whose blend mode should be set.
  • blendMode: The blend mode to be set.
  • Returns 
getBlendMode(id: DesignBlockId): BlendMode

Get the blend mode of the given design block.

  • id: The block whose blend mode should be queried.
  • Returns The blend mode.
type BlendMode = 'PassThrough' | 'Normal' | 'Darken' | 'Multiply' | 'ColorBurn' | 'Lighten' | 'Screen' | 'ColorDodge' | 'Overlay' | 'SoftLight' | 'HardLight' | 'Difference' | 'Exclusion' | 'Hue' | 'Saturation' | 'Color' | 'Luminosity'