Drop Shadow
In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify an block's drop shadow through the block
API.
Drop shadows can be added to any shape, text or image.
One can adjust its offset relative to its block on the X and Y axes, its blur factor on the X and Y axes and whether it is visible behind a transparent block.
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.
Functions#
hasDropShadow(id: number): boolean
queries if the given block has a drop shadow property.
setDropShadowEnabled(id: number, enabled: boolean): void
enable or disable the drop shadow of the given block.
isDropShadowEnabled(id: number): boolean
queries if the drop shadow of the given block is enabled.
setDropShadowRGBA(id: number, r: number, g: number, b: number, a: number): void
sets the drop shadow color of the given block.
getDropShadowColorRGBA(id: number): RGBA
gets the drop shadow color of the given block.
setDropShadowOffsetX(id: number, offsetX: number): void
sets the drop shadow's offset on the X axis of the given block. Can be negative.setDropShadowOffsetY(id: number, offsetY: number): void
sets the drop shadow's offset on the Y axis of the given block. Can be negative.
setDropShadowOffsetX(id: number): number
gets the drop shadow's offset on the X axis of the given block.setDropShadowOffsetY(id: number): number
gets the drop shadow's offset on the Y axis of the given block.
setDropShadowBlurRadiusX(id: number, blurRadiusX: number): void
sets the drop shadow's blur radius on the X axis of the given block.setDropShadowBlurRadiusY(id: number, blurRadiusY: number): void
sets the drop shadow's blur radius on the Y axis of the given block.
setDropShadowBlurRadiusX(id: number): number
gets the drop shadow's blur radius on the X axis of the given block.setDropShadowBlurRadiusY(id: number): number
gets the drop shadow's blur radius on the Y axis of the given block.
By default, clipping is set to true
.
When true
, a drop shadow will not show at all behind a block even if this block has transparency.
Setting clipping to false
will have the drop shadow shown behind a block that has transparency.
setDropShadowClip(id: number, boolean: number): void
sets the drop shadow clipping of the given block.
getDropShadowClip(id: number): boolean
gets the drop shadow color of the given block.
// Configure a basic colored drop shadow if the block supports themif (engine.block.hasDropShadow(block)) {engine.block.setDropShadowEnabled(block, true);engine.block.setDropShadowColorRGBA(block, 1.0, 0.75, 0.8, 1.0);engine.block.setDropShadowXOffset(block, -10);engine.block.setDropShadowYOffset(block, 5);engine.block.setDropShadowXBlurRadius(block, -10);engine.block.setDropShadowYBlurRadius(block, 5);engine.block.setDropShadowClip(block, false)// Query a blocks drop shadow propertiesconst dropShadowIsEnabled = engine.block.isDropShadowEnabled(block);const dropShadowXBlurRadius = engine.block.getDropShadowXBlurRadius(block);const dropShadowYBlurRadius = engine.block.getDropShadowYBlurRadius(block);}