Skip to content

Edit Shapes

The graphic design block in CE.SDK allows you to modify and replace its shape. CreativeEditor SDK supports many different types of shapes, such as rectangles, lines, ellipses, polygons and custom vector paths.

Similarly to blocks, each shape object has a numeric id which can be used to query and modify its properties.

Accessing Shapes

In order to query whether a block supports shapes, you should call the func supportsShape(_ id: DesignBlockID) throws -> Bool API. Currently, only the graphic design block supports shape objects.

try engine.block.supportsShape(graphic) // Returns true
let text = try engine.block.create(.text)
try engine.block.supportsShape(text) // Returns false

To query the shape of a design block, call the func getShape(_ id: DesignBlockID) throws -> DesignBlockID API. You can now pass the returned result into other APIs in order to query more information about the shape, e.g. its type via the func getType(_ id: DesignBlockID) throws -> String API.

let shape = try engine.block.getShape(graphic)
let shapeType = try engine.block.getType(shape)

When replacing the shape of a design block, remember to destroy the previous shape object if you don’t intend to use it any further. Shape objects that are not attached to a design block will never be automatically destroyed.

Destroying a design block will also destroy its attached shape block.

let starShape = try engine.block.createShape(.star)
try engine.block.destroy(engine.block.getShape(graphic))
try engine.block.setShape(graphic, shape: starShape)
/* The following line would also destroy the currently attached starShape */
// engine.block.destroy(graphic)

Shape Properties

Just like design blocks, shapes with different types have different properties that you can query and modify via the API. Use func findAllProperties(_ id: DesignBlockID) throws -> [String] in order to get a list of all properties of a given shape.

For the star shape in this example, the call would return ["name", "shape/star/innerDiameter", "shape/star/points", "type", "uuid"].

Please refer to the API docs for a complete list of all available properties for each type of shape.

let allShapeProperties = try engine.block.findAllProperties(starShape)

Once we know the property keys of a shape, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use func setInt(_ id: DesignBlockID, property: String, value: Int) throws in order to change the number of points of the star to six.

try engine.block.setInt(starShape, property: "shape/star/points", value: 6)

Full Code

Here’s the full code:

import Foundation
import IMGLYEngine


@MainActor
func usingShapes(engine: Engine) async throws {
  let scene = try engine.scene.create()


  let graphic = try engine.block.create(.graphic)
  let imageFill = try engine.block.createFill(.image)
  try engine.block.setString(
    imageFill,
    property: "fill/image/imageFileURI",
    value: "https://img.ly/static/ubq_samples/sample_1.jpg"
  )
  try engine.block.setFill(graphic, fill: imageFill)
  try engine.block.setWidth(graphic, value: 100)
  try engine.block.setHeight(graphic, value: 100)
  try engine.block.appendChild(to: scene, child: graphic)


  try await engine.scene.zoom(to: graphic, paddingLeft: 40, paddingTop: 40, paddingRight: 40, paddingBottom: 40)


  try engine.block.supportsShape(graphic) // Returns true
  let text = try engine.block.create(.text)
  try engine.block.supportsShape(text) // Returns false


  let rectShape = try engine.block.createShape(.rect)
  try engine.block.setShape(graphic, shape: rectShape)
  let shape = try engine.block.getShape(graphic)
  let shapeType = try engine.block.getType(shape)


  let starShape = try engine.block.createShape(.star)
  try engine.block.destroy(engine.block.getShape(graphic))
  try engine.block.setShape(graphic, shape: starShape)
  /* The following line would also destroy the currently attached starShape */
  // engine.block.destroy(graphic)


  let allShapeProperties = try engine.block.findAllProperties(starShape)
  try engine.block.setInt(starShape, property: "shape/star/points", value: 6)
}