Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Platform:
Language:

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.
File:
// Configure a basic colored drop shadow if the block supports them
if (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 properties
  const dropShadowIsEnabled = engine.block.isDropShadowEnabled(block);
  const dropShadowXBlurRadius = engine.block.getDropShadowXBlurRadius(block);
  const dropShadowYBlurRadius = engine.block.getDropShadowYBlurRadius(block);
}