Create Shapes - React

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.62.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user'
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.62.0/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();
  engine.editor.setSettingBool('page/dimOutOfPageAreas', false);

  const graphic = engine.block.create('graphic');
  const imageFill = engine.block.createFill('image');
  engine.block.setString(
    imageFill,
    'fill/image/imageFileURI',
    'https://img.ly/static/ubq_samples/sample_1.jpg'
  );
  engine.block.setFill(graphic, imageFill);
  engine.block.setWidth(graphic, 100);
  engine.block.setHeight(graphic, 100);
  engine.block.appendChild(scene, graphic);

  engine.scene.zoomToBlock(graphic, 40, 40, 40, 40);


  engine.block.supportsShape(graphic); // Returns true
  const text = engine.block.create('text');
  engine.block.supportsShape(text); // Returns false

  const rectShape = engine.block.createShape('rect');
  engine.block.setShape(graphic, rectShape);
  const shape = engine.block.getShape(graphic);
  const shapeType = engine.block.getType(shape);

  const starShape = engine.block.createShape('star');
  engine.block.destroy(engine.block.getShape(graphic));
  engine.block.setShape(graphic, starShape);
  /* The following line would also destroy the currently attached starShape */
  // engine.block.destroy(graphic);

  const allShapeProperties = engine.block.findAllProperties(starShape);
  engine.block.setInt(starShape, 'shape/star/points', 6);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>

  <body>
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

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:

'//ly.img.ubq/shape/rect'
'//ly.img.ubq/shape/line'
'//ly.img.ubq/shape/ellipse'
'//ly.img.ubq/shape/polygon'
'//ly.img.ubq/shape/star'
'//ly.img.ubq/shape/vector_path'

Note: short types are also accepted, e.g. ‘rect’ instead of ‘//ly.img.ubq/shape/rect’.

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 createShape(type: string): number API.

const rectShape = engine.block.createShape('rect');

In order to assign this shape to the graphic block, call the setShape(id: number, shape: number): void API.

engine.block.setShape(graphic, 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 CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.62.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL:
    'https://cdn.img.ly/packages/imgly/cesdk-engine/1.62.0/assets',
};

CreativeEngine.init(config).then(async engine => {
  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();
  engine.editor.setSetting('page/dimOutOfPageAreas', false);

  const graphic = engine.block.create('graphic');
  const imageFill = engine.block.createFill('image');
  engine.block.setString(
    imageFill,
    'fill/image/imageFileURI',
    'https://img.ly/static/ubq_samples/sample_1.jpg',
  );
  engine.block.setFill(graphic, imageFill);
  engine.block.setWidth(graphic, 100);
  engine.block.setHeight(graphic, 100);
  engine.block.appendChild(scene, graphic);

  engine.scene.zoomToBlock(graphic, 40, 40, 40, 40);

  engine.block.supportsShape(graphic); // Returns true
  engine.block.supportsShape(text); // Returns false
});