Fills
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.
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.
Creating a Fill#
To create a fill simply use createFill(type: string): number
.
We currently support the following fill types:
'//ly.img.ubq/fill/color'
'//ly.img.ubq/fill/gradient/linear'
'//ly.img.ubq/fill/gradient/radial'
'//ly.img.ubq/fill/gradient/conical'
'//ly.img.ubq/fill/image'
'//ly.img.ubq/fill/video'
Note: short types are also accepted, e.g. 'color'
instead of '//ly.img.ubq/fill/color'
.
Functions#
You can configure fills just like you configure design blocks. See Modify Properties for more detail.
getFill(block: number): number
queries the current fill of a design block.
destroy(block: number): void
destroys 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): void
allows temporarily disabling a fill without destroying it.
isFillEnabled(block: number): boolean
checks 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);