Search
Loading...
Skip to content

Using Strokes

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to modify strokes through the block API. Strokes can be added to any shape or text and stroke styles are varying from plain solid lines to dashes and gaps of varying lengths and can have different end caps.

Strokes#

supportsStroke(id: DesignBlockId): boolean

Query if the given block has a stroke property.

  • id: The block to query.
  • Returns True if the block has a stroke property.
setStrokeEnabled(id: DesignBlockId, enabled: boolean): void

Enable or disable the stroke of the given design block. Required scope: ‘stroke/change’

  • id: The block whose stroke should be enabled or disabled.
  • enabled: If true, the stroke will be enabled.
isStrokeEnabled(id: DesignBlockId): boolean

Query if the stroke of the given design block is enabled.

  • id: The block whose stroke state should be queried.
  • Returns True if the block’s stroke is enabled.
setStrokeColor(id: DesignBlockId, color: Color): void

Set the stroke color of the given design block. Required scope: ‘stroke/change’

  • id: The block whose stroke color should be set.
  • color: The color to set.
getStrokeColor(id: DesignBlockId): Color

Get the stroke color of the given design block.

  • id: The block whose stroke color should be queried.
  • Returns The stroke color.
setStrokeWidth(id: DesignBlockId, width: number): void

Set the stroke width of the given design block. Required scope: ‘stroke/change’

  • id: The block whose stroke width should be set.
  • width: The stroke width to be set.
getStrokeWidth(id: DesignBlockId): number

Get the stroke width of the given design block.

  • id: The block whose stroke width should be queried.
  • Returns The stroke’s width.
setStrokeStyle(id: DesignBlockId, style: StrokeStyle): void

Set the stroke style of the given design block. Required scope: ‘stroke/change’

  • id: The block whose stroke style should be set.
  • style: The stroke style to be set.
type StrokeStyle =
  | 'Dashed'
  | 'DashedRound'
  | 'Dotted'
  | 'LongDashed'
  | 'LongDashedRound'
  | 'Solid';
getStrokeStyle(id: DesignBlockId): StrokeStyle

Get the stroke style of the given design block.

  • id: The block whose stroke style should be queried.
  • Returns The stroke’s style.
setStrokePosition(id: DesignBlockId, position: StrokePosition): void

Set the stroke position of the given design block. Required scope: ‘stroke/change’

  • id: The block whose stroke position should be set.
  • position: The stroke position to be set.
type StrokePosition = 'Center' | 'Inner' | 'Outer';
getStrokePosition(id: DesignBlockId): StrokePosition

Get the stroke position of the given design block.

  • id: The block whose stroke position should be queried.
  • Returns The stroke position.
setStrokeCornerGeometry(id: DesignBlockId, cornerGeometry: StrokeCornerGeometry): void

Set the stroke corner geometry of the given design block. Required scope: ‘stroke/change’

  • id: The block whose stroke join geometry should be set.
  • cornerGeometry: The stroke join geometry to be set.
type StrokeCornerGeometry = 'Bevel' | 'Miter' | 'Round';
getStrokeCornerGeometry(id: DesignBlockId): StrokeCornerGeometry

Get the stroke corner geometry of the given design block.

  • id: The block whose stroke join geometry should be queried.
  • Returns The stroke join geometry.

Full Code#

Here’s the full code for using strokes:

// Check if block supports strokes
if (engine.block.supportsStroke(block)) {
  // Enable the stroke
  engine.block.setStrokeEnabled(block, true);
  const strokeIsEnabled = engine.block.isStrokeEnabled(block);


  // Configure it
  engine.block.setStrokeWidth(block, 5);
  const strokeWidth = engine.block.getStrokeWidth(block);
  engine.block.setStrokeColor(block, { r: 0, g: 1, b: 0, a: 1 });
  const strokeColor = engine.block.getStrokeColor(block);
  engine.block.setStrokeStyle(block, 'Dashed');
  const strokeStyle = engine.block.getStrokeStyle(block);
  engine.block.setStrokePosition(block, 'Outer');
  const strokePosition = engine.block.getStrokePosition(block);
  engine.block.setStrokeCornerGeometry(block, 'Round');
  const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);
}