Skip to content

Create Shapes

The CE.SDK provides a flexible way to create and customize shapes, including rectangles, circles, lines, and polygons.

Supported Shapes

The following shapes are supported in CE.SDK:

  • ShapeType.Rect
  • ShapeType.Line
  • ShapeType.Ellipse
  • ShapeType.Polygon
  • ShapeType.Star
  • ShapeType.VectorPath

Creating Shapes

graphic blocks don’t have any shape after you create them, which leaves them invisible by default. In order to make them visible, we need to assign both a shape and a fill to the graphic block. You can find more information on fills here. In this example we have created and attached an image fill.

In order to create a new shape, we must call the fun createShape(type: ShapeType): DesignBlock API.

val rectShape = engine.block.createShape(ShapeType.Rect)

In order to assign this shape to the graphic block, call the fun setShape(block: DesignBlock, shape: DesignBlock) API.

engine.block.setShape(graphic, shape = rectShape)

Just like design blocks, shapes with different types have different properties that you can set via the API. Please refer to the API docs for a complete list of all available properties for each type of shape.

Full Code

Here’s the full code:

import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import ly.img.engine.DesignBlockType
import ly.img.engine.Engine
import ly.img.engine.FillType
import ly.img.engine.ShapeType


fun usingShapes(
    license: String,
    userId: String,
) = CoroutineScope(Dispatchers.Main).launch {
    val engine = Engine.getInstance(id = "ly.img.engine.example")
    engine.start(license = license, userId = userId)
    engine.bindOffscreen(width = 100, height = 100)


    val scene = engine.scene.create()


    val graphic = engine.block.create(DesignBlockType.Graphic)
    val imageFill = engine.block.createFill(FillType.Image)
    engine.block.setString(
        block = imageFill,
        property = "fill/image/imageFileURI",
        value = "https://img.ly/static/ubq_samples/sample_1.jpg",
    )
    engine.block.setFill(graphic, fill = imageFill)
    engine.block.setWidth(graphic, value = 100F)
    engine.block.setHeight(graphic, value = 100F)
    engine.block.appendChild(parent = scene, child = graphic)


    engine.scene.zoomToBlock(
        graphic,
        paddingLeft = 40F,
        paddingTop = 40F,
        paddingRight = 40F,
        paddingBottom = 40F,
    )


    engine.block.supportsShape(graphic) // Returns true
    val text = engine.block.create(DesignBlockType.Text)
    engine.block.supportsShape(text) // Returns false


    val rectShape = engine.block.createShape(ShapeType.Rect)
    engine.block.setShape(graphic, shape = rectShape)


    engine.stop()
}