Create Cutout - React

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

const config = {
  // license: import.meta.env.VITE_CESDK_LICENSE,
  userId: 'guides-user'
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/assets'
};

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

  const scene = engine.scene.create();

  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);
  engine.scene.zoomToBlock(page, 50, 50, 50, 50);

  const circle = engine.block.createCutoutFromPath(
    'M 0,25 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 Z'
  );
  engine.block.appendChild(page, circle);
  engine.block.setFloat(circle, 'cutout/offset', 3.0);
  engine.block.setEnum(circle, 'cutout/type', 'Dashed');

  const square = engine.block.createCutoutFromPath('M 0,0 H 50 V 50 H 0 Z');
  engine.block.appendChild(page, square);
  engine.block.setPositionX(square, 50);
  engine.block.setFloat(square, 'cutout/offset', 6.0);

  const union = engine.block.createCutoutFromOperation(
    [circle, square],
    'Union'
  );
  engine.block.appendChild(page, union);
  engine.block.destroy(circle);
  engine.block.destroy(square);

  engine.editor.setSpotColorRGB('CutContour', 0.0, 0.0, 1.0);
});

<!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>

Cutouts are a special feature one can use with cuttings printers. When printing a PDF file containing cutouts paths, a cutting printer will cut these paths with a cutter rather than print them with ink. Use cutouts to create stickers, iron on decals, etc.

Cutouts can be created from an SVG string describing its underlying shape. Cutouts can also be created from combining multiple existing cutouts using the boolean operations Union, Difference, Intersection and XOR.

Cutouts have a type property which can take one of two values: Solid and Dashed. Cutting printers recognize cutouts paths through their specially named spot colors. By default, Solid cutouts have the spot color "CutContour" to produce a continuous cutting line and Dashed cutouts have the spot colors "PerfCutContour" to produce a perforated cutting line. You may need to adjust these spot color names for you printer.

Cutouts have an offset property that determines the distance at which the cutout path is rendered from the underlying path set when created.

Setup the scene#

We first create a new scene with a new page.

  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();

  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);
  engine.scene.zoomToBlock(page, 50, 50, 50, 50);

Create cutouts#

Here we add two cutouts. First, a circle of type Dashed and with an offset of 3.0. Second, a square of default type Solid and an offset of 6.0.

  const circle = engine.block.createCutoutFromPath(
    'M 0,25 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 Z'
  );
  engine.block.appendChild(page, circle);
  engine.block.setFloat(circle, 'cutout/offset', 3.0);
  engine.block.setEnum(circle, 'cutout/type', 'Dashed');

  const square = engine.block.createCutoutFromPath('M 0,0 H 50 V 50 H 0 Z');
  engine.block.appendChild(page, square);
  engine.block.setPositionX(square, 50);
  engine.block.setFloat(square, 'cutout/offset', 6.0);

Combining multiple cutouts into one#

Here we use the Union operation to create a new cutout that consists of the combination of the earlier two cutouts we have created. Note that we destroy the previously created circle and square cutouts as we don’t need them anymore and we certainly don’t want to printer to cut through those paths as well.

When combining multiple cutouts, the resulting cutout will be of the type of the first cutout given and an offset of 0. In this example, since the circle cutout is of type Dashed, the newly created cutout will also be of type Dashed.

const union = engine.block.createCutoutFromOperation(
  [circle, square],
  'Union'
);
engine.block.appendChild(page, union);
engine.block.destroy(circle);
engine.block.destroy(square);

Change the default color for Solid cutouts#

For some reason, we’d like the cutouts of type Solid to not render as magenta but as blue. Knowing that "CutContour" is the spot color associated with Solid, we change it RGB approximation to blue. Thought the cutout will render as blue, the printer will still interpret this path as a cutting because of its special spot color name.

engine.editor.setSpotColorRGB('CutContour', 0.0, 0.0, 1.0);

Cutout Type#

A block that defines a cutout path for another block.

This section describes the properties available for the Cutout Type (//ly.img.ubq/cutout) block type.

Property	Type	Default Value	Description
`alwaysOnBottom`	`Bool`	`false`	If true, this element’s global sorting order is automatically adjusted to be lower than all other siblings.
`alwaysOnTop`	`Bool`	`true`	If true, this element’s global sorting order is automatically adjusted to be higher than all other siblings.
`clipped`	`Bool`	`false`	This component is used to identify elements whose contents and children should be clipped to their bounds.
`contentFill/mode`	`Enum`	`"Cover"`	Defines how content should be resized to fit its container (e.g., Cover, Contain, Stretch)., Possible values: `"Crop"`, `"Cover"`, `"Contain"`
`cutout/offset`	`Float`	`0`	The offset from path at which to draw the cutout line.
`cutout/path`	`String`	`""`	The path string, accepts a subset of SVG path strings.
`cutout/smoothing`	`Float`	`0`	Pixel threshold by which to round out the path’s corners.
`cutout/type`	`Enum`	`"Solid"`	The type of cutout line., Possible values: `"Solid"`, `"Dashed"`
`flip/horizontal`	`Bool`	`"-"`	Whether the block is flipped horizontally.
`flip/vertical`	`Bool`	`"-"`	Whether the block is flipped vertically.
`globalBoundingBox/height`	`Float`	`"-"`	The height of the block’s axis-aligned bounding box in world coordinates., (read-only)
`globalBoundingBox/width`	`Float`	`"-"`	The width of the block’s axis-aligned bounding box in world coordinates., (read-only)
`globalBoundingBox/x`	`Float`	`"-"`	The x-coordinate of the block’s axis-aligned bounding box in world coordinates., (read-only)
`globalBoundingBox/y`	`Float`	`"-"`	The y-coordinate of the block’s axis-aligned bounding box in world coordinates., (read-only)
`height`	`Float`	`100`	The height of the block’s frame.
`height/mode`	`Enum`	`"Absolute"`	A mode describing how the height dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`
`highlightEnabled`	`Bool`	`true`	Show highlighting when selected or hovered
`lastFrame/height`	`Float`	`"-"`	The height of the block’s frame from the previous layout pass., (read-only)
`lastFrame/width`	`Float`	`"-"`	The width of the block’s frame from the previous layout pass., (read-only)
`lastFrame/x`	`Float`	`"-"`	The x-coordinate of the block’s frame from the previous layout pass., (read-only)
`lastFrame/y`	`Float`	`"-"`	The y-coordinate of the block’s frame from the previous layout pass., (read-only)
`placeholder/enabled`	`Bool`	`false`	Whether the placeholder behavior is enabled or not.
`placeholderControls/showButton`	`Bool`	`false`	Show the placeholder button.
`placeholderControls/showOverlay`	`Bool`	`false`	Show the overlay pattern.
`position/x`	`Float`	`0`	The x-coordinate of the block’s origin.
`position/x/mode`	`Enum`	`"Absolute"`	A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`
`position/y`	`Float`	`0`	The y-coordinate of the block’s origin.
`position/y/mode`	`Enum`	`"Absolute"`	A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`
`rotation`	`Float`	`0`	The rotation of the block in degrees.
`selected`	`Bool`	`false`	Indicates if the block is currently selected.
`selectionEnabled`	`Bool`	`true`	Whether the block can be selected in the editor.
`transformLocked`	`Bool`	`false`	DesignBlocks with this tag can’t be transformed (moved, rotated, scaled, cropped, or flipped).
`visible`	`Bool`	`true`	If the block is visible in the editor.
`width`	`Float`	`100`	The width of the block’s frame.
`width/mode`	`Enum`	`"Absolute"`	A mode describing how the width dimension may be interpreted (Undefined, Exactly, AtMost)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`

Full Code#

Here’s the full code:

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

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

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

  const scene = engine.scene.create();

  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);
  engine.scene.zoomToBlock(page, 50, 50, 50, 50);

  var circle = engine.block.createCutoutFromPath(
    'M 0,25 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 Z'
  );
  engine.block.appendChild(page, circle);
  engine.block.setFloat(circle, 'cutout/offset', 3.0);
  engine.block.setEnum(circle, 'cutout/type', 'Dashed');

  var square = engine.block.createCutoutFromPath('M 0,0 H 50 V 50 H 0 Z');
  engine.block.appendChild(page, square);
  engine.block.setPositionX(square, 50);
  engine.block.setFloat(square, 'cutout/offset', 6.0);

  var union = engine.block.createCutoutFromOperation([circle, square], 'Union');
  engine.block.appendChild(page, union);
  engine.block.destroy(circle);
  engine.block.destroy(square);

  engine.editor.setSpotColorRGB('CutContour', 0.0, 0.0, 1.0);
});