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

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.

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.

Strokes#

  • hasStroke(id: number): boolean queries if the given block has a stroke property.
  • setStrokeEnabled(id: number, enabled: boolean): void enable or disable the stroke of the given block.
  • isStrokeEnabled(id: number): boolean queries if the stroke of the given block is enabled.
  • setStrokeColorRGBA(id: number, r: number, g: number, b: number, a: number): void sets the stroke color of the given block.
  • getStrokeColorRGBA(id: number): RGBA gets the stroke color of the given block.
  • setStrokeWidth(id: number, width: number): void sets the stroke width of the given block.
  • getStrokeWidth(id: number): number gets the stroke width of the given block.
  • setStrokeStyle(id: number, style: string): void sets the stroke style of the given block. Valid styles:
    • 'Dashed'
    • 'DashedRound'
    • 'Dotted'
    • 'LongDashed'
    • 'LongDashedRound'
    • 'Solid'
  • getStrokeStyle(id: number): string gets the stroke style of the given block.
  • setStrokePosition(id: number, position: string): void sets the stroke position of the given block. Valid positions: 'Center' | 'Inner' | 'Outer'
  • getStrokePosition(id: number): string gets the stroke position of the given block.
  • setStrokeCornerGeometry(id: number, cornerGeometry: string): void sets the stroke corner geometry of the given block. Valid geometries: 'Bevel' | 'Miter' | 'Round'
  • getStrokeCornerGeometry(id: number): string gets the stroke corner geometry of the given block.
File:
// Check if block supports strokes
if (engine.block.hasStroke(block)) {
  // Enable the stroke
  engine.block.setStrokeEnabled(block, true);
  const strokeIsEnabled = engine.block.isStrokeEnabled(block);


  // Configure it
  engine.block.setStrokeColorRGBA(block, 1.0, 0.75, 0.8, 1.0);
  const strokeColor = engine.block.getStrokeColorRGBA(block);
  engine.block.setStrokeWidth(block, 5);
  const strokeWidth = engine.block.getStrokeWidth(block);
  engine.block.setStrokeStyle(block, 'Dashed');
  const strokeStlye = 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);
}