Using Cutouts

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.

Note#

Note that the actual color approximation given to the spot color does not affect how the cutting printer interprets the cutout, only how it is rendered. The default color approximations are magenta for "CutContour" and green for "PerfCutContour".

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

Explore a full code sample on Stackblitz or view the code on Github.

Setup the scene#

We first create a new scene with a new page.

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.

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.

Warning#

When using the Difference operation, the first cutout is the cutout that is subtracted from. For other operations, the order of the cutouts don't matter.

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.


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

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.24.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);
});