In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a block's fill through the
block API. The fill defines the visual contents within a block's shape.
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
Check out the APIs Overview to see that illustrated in more detail.
Creating a Fill#
To create a fill simply use
createFill(type: string): number.
We currently support the following fill types:
Note: short types are also accepted, e.g.
'color' instead of
You can configure fills just like you configure design blocks. See Modify Properties for more detail.
getFill(block: number): numberqueries the current fill of a design block.
destroy(block: number): voiddestroys a fill in the same way as it destroys design blocks.
setFill(block: number, fill: number)applies the fill to an existing design block.
Remember to first destroy the previous fill if you don't need it any more. A single fill can also be connected to multiple design blocks. This way, modifying the properties of the fill will apply the changes to all connected design blocks at once.
hasFill(block: number)checks if a block supports fills.
setFillEnabled(block: number, enabled: boolean): voidallows temporarily disabling a fill without destroying it.
isFillEnabled(block: number): booleanchecks whether a fill is enabled.
const solidColor = engine.block.createFill('color');engine.block.setColorRGBA(solidColor, 'color/value', 0.44, 0.76, 0.76, 1.0);const previousFill = engine.block.getFill(block);engine.block.destroy(previousFill);engine.block.setFill(block, solidColor);engine.block.hasFill(block);engine.block.setFillEnabled(block, false);engine.block.isFillEnabled(block);