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

  • hasOpacity(id: number): boolean checks if the block has an opacity.
  • setOpacity(id: number, opacity: number): void takes a number between 0 and 1.
  • getOpacity(id: number): number returns a number between 0 and 1.

Placeholder Content#

Query if a block is set as containing placeholder content instead of actual content.

  • showsPlaceholderContent(id: number): boolean Checks if the block is marked as showing placeholder content.

Blend Mode#

Define the blending behaviour of a block.

  • setBlendMode(id: number, blendMode: 'PassThrough' | 'Normal' | 'Darken' | 'Multiply' | 'ColorBurn' | 'Lighten' | 'Screen' | 'ColorDodge' | 'Overlay' | 'SoftLight' | 'HardLight' | 'Difference' | 'Exclusion' | 'Hue' | 'Saturation' | 'Color' | 'Luminosity'): void updates the blend mode.
  • getBlendMode(id: number): 'PassThrough' | 'Normal' | 'Darken' | 'Multiply' | 'ColorBurn' | 'Lighten' | 'Screen' | 'ColorDodge' | 'Overlay' | 'SoftLight' | 'HardLight' | 'Difference' | 'Exclusion' | 'Hue' | 'Saturation' | 'Color' | 'Luminosity' returns the current blend mode.

Background Color#

Manipulate the background of a block.

To understand the difference between fill and background color take the text block. The glyphs of the text itself are colored by the fill color. The rectangular background given by the bounds of the block on which the text is drawn is colored by the background color.

  • hasBackgroundColor(id: number): boolean checks if the block has a background color.
  • setBackgroundColorRGBA(id: number, r: number, g: number, b: number, a: number): void sets the block's background color.
  • getBackgroundColorRGBA(id: number): RGBA gets the block's background color.
  • setBackgroundColorEnabled(id: number, enabled: boolean): void enable or disable the block's background color.
  • isBackgroundColorEnabled(id: number): boolean checks if the block's background color is enabled.
File:
engine.block.hasOpacity(image);
engine.block.setOpacity(image, 0.5);
engine.block.getOpacity(image);


engine.block.showsPlaceholderContent(image);


engine.block.setBlendMode(image, 'Multiply');
engine.block.getBlendMode(image);


  if (engine.block.hasBackgroundColor(page)) {
  engine.block.setBackgroundColorRGBA(page, 1, 0, 0, 1); // Red
  engine.block.getBackgroundColorRGBA(page);
  engine.block.setBackgroundColorEnabled(page, true);
  engine.block.isBackgroundColorEnabled(page);
}