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.
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); // Redengine.block.getBackgroundColorRGBA(page);engine.block.setBackgroundColorEnabled(page, true);engine.block.isBackgroundColorEnabled(page);}