Draw Shapes with DCE JS

In version 3.x of DCE-JS, we introduced multiple APIs for drawing basic shapes on the built-in UI. This article will dive into how it works.

We will start with the following code which defines a page that has a CameraEnhancer instance embedded:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DCEJS - Draw Shapes</title>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer/dist/dce.js"></script>
</head>
<body style="width:80vw; height:600px; margin: 0 auto">
    <br />
    <button id="drawShapes">Click to Draw Shapes</button><br /><br />
    <div id="enhancerUIContainer" style="width:100%; height:100%;"></div>
    <script>
        let cameraEnhancer = null;
        document.getElementById('drawShapes').onclick = drawShapes;
        (async () => {
            cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
            await cameraEnhancer.setUIElement(Dynamsoft.DCE.CameraEnhancer.defaultUIElementURL);
            document.getElementById("enhancerUIContainer").appendChild(cameraEnhancer.getUIElement());
            await cameraEnhancer.open();
        })();
        function drawShapes(){}
    </script>
</body>
</html>

Add a DrawingLayer

All shapes are drawn on specific DrawingLayers. The first step in drawing a shape is to create a DrawingLayer.

function drawShapes(){
  let drawingLayer = cameraEnhancer.createDrawingLayer();
}

Define DrawingItems

An DrawingItem is the basic shape that can be drawn. The SDK classify DrawingItems in different types: DT_Rect, DT_Arc, DT_Line, DT_Polygon, DT_Text, and DT_Image. The SDK also allow multiple items to be joined together and form the type called DT_Group.

The following code shows how to define these types of DrawingItems:

let rect = new Dynamsoft.DCE.DrawingItem.DT_Rect(50, 50, 300, 300);
let arc = new Dynamsoft.DCE.DrawingItem.DT_Arc(840, 150, 100, 0, 360);
let line = new Dynamsoft.DCE.DrawingItem.DT_Line({x: 600, y: 600}, {x: 1050, y: 400});
let text = new Dynamsoft.DCE.DrawingItem.DT_Text("TESTING...", 360, 360, 50);
let image = new Dynamsoft.DCE.DrawingItem.DT_Image(document.getElementById('testIMG'), 150, 600);
let polygon = new Dynamsoft.DCE.DrawingItem.DT_Polygon([{x: 640, y: 100}, {x: 500, y: 300}, {x: 780, y: 300}, {x: 690, y: 100}]);

Alternatively, the code might be like this

import { DrawingItem } from "dynamsoft-camera-enhancer";
let arc = new DrawingItem.DT_Arc(840, 150, 100, 0, 360);
let line = new DrawingItem.DT_Line({x: 600, y: 600}, {x: 1050, y: 400});
let text = new DrawingItem.DT_Text("TESTING...", 360, 360, 50);
let image = new DrawingItem.DT_Image(document.getElementById('testIMG'), 150, 600);
let polygon = new DrawingItem.DT_Polygon([{x: 640, y: 100}, {x: 500, y: 300}, {x: 780, y: 300}, {x: 690, y: 100}]);

NOTE:

document.getElementById('testIMG') is an image on the page defined in an HTMLImageElement.

Draw these DrawingItems

After DrawingItems have been defined, simply call addDrawingItems() to draw them on the DrawingLayer we created earlier:

function drawShapes(){
  let drawingLayer = cameraEnhancer.createDrawingLayer();
  let rect = new Dynamsoft.DCE.DrawingItem.DT_Rect(50, 50, 300, 300);
  let arc = new Dynamsoft.DCE.DrawingItem.DT_Arc(840, 150, 100, 0, 360);
  let line = new Dynamsoft.DCE.DrawingItem.DT_Line({x: 600, y: 600}, {x: 1050, y: 400});
  let text = new Dynamsoft.DCE.DrawingItem.DT_Text("TESTING...", 360, 360, 50);
  let image = new Dynamsoft.DCE.DrawingItem.DT_Image(document.getElementById('testIMG'), 150, 600);
  let polygon = new Dynamsoft.DCE.DrawingItem.DT_Polygon([{x: 640, y: 100}, {x: 500, y: 300}, {x: 780, y: 300}, {x: 690, y: 100}]);
  drawingLayer.addDrawingItems([rect, arc, line, text, image, polygon]);
}

Define the DrawingStyle

All new DrawingLayer objects come with the same predefined style definition

{
  fillStyle: "rgba(245, 236, 73, 0.3)",
  fontFamily: "sans-serif",
  fontSize: 10,
  id: 4,
  lineWidth: 2,
  paintMode: "stroke",
  strokeStyle: "rgba(245, 236, 73, 1)"
}

If the default style doesn’t look good, you can create your own style to use:

let newDrawingStyleID = cameraEnhancer.createDrawingStyle({
  lineWidth: 5,
  paintMode: "strokeAndFill",
  fontSize: 100,
  fillStyle: "rgba(65, 105, 225, 0.5)",
  strokeStyle: "rgba(65, 105, 225, 1)",
  fontFamily: "Consolas"
});
drawingLayer.setDrawingStyle(newDrawingStyleID);

Set multiple DrawingStyles

For each DrawingLayer, DrawingStyles can be used in three ways

Use the same DrawingStyle for everything;
Use a specific DrawingStyle for a specific type of DrawingItems;
Use a specific DrawingStyle for a specific type of DrawingItems which are in a particular state.

As of version 3.0.1, the only available states for a DrawingStyle are “default” and “selected”.

The following shows how to do the different settings with the method setDrawingStyle:

// The following code assumes we have defined 3 different DrawingStyles with IDs 100, 101 and 102.
// Use DrawingLayer 100 for everything
drawingLayer.setDrawingStyle(100);
// Use DrawingLayer 101 for all "rect"s
drawingLayer.setDrawingStyle(101, "rect");
// Use DrawingLayer 102 for selected "rect"s
drawingLayer.setDrawingStyle(102, "rect", "selected");

Modify existing DrawingItems

The SDK allows DrawingItems to be modified after they are drawn on the UI. To do this, we first change the DrawingLayer to “editor” mode with the method setMode().

drawingLayer.setMode("editor");

Next, click on the DrawingItem you want to modify and you will see its “corners” and a “rotate control point” which, when dragged, modify the original shape in different ways. At the same time, this DrawingItem will be marked “selected”, which means it might use a different DrawingStyle.

Try it out

You can try the shape drawing feature on the following link:

Draw Shapes with DCEJS