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 strokesif (engine.block.hasStroke(block)) {// Enable the strokeengine.block.setStrokeEnabled(block, true);const strokeIsEnabled = engine.block.isStrokeEnabled(block);// Configure itengine.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);}