DrawingLayer

Special Notice

If you are using Dynamsoft Camera Enhancer with Dynamsoft Barcode Reader, Dynamsoft Label Recognizer or Dynamsoft Document Normalizer, note that there are dedicated DrawingLayers for them as shown below:

You can manipulate these DrawingLayers directly, for example, the following code applies a different DrawingStyle to the DrawingLayer used by Dynamsoft Label Recognizer:

Alternatively, you can directly change the style already in use instead of replacing it with a new one. Learn more at updateDrawingStyle.

// Gets the DrawingLayer used by the Dynamsoft Label Recognizer instance to which enhancer is bound.
let dlrDrawingLayer = enhancer.getDrawingLayer(2);
// Creates a new style to be used.
let newStyleId = enhancer.createDrawingStyle({
    fillStyle: "rgba(100, 75, 245, 0.3)",
    lineWidth: 5,
    paintMode: "strokeAndFill",
    strokeStyle: "rgba(73, 173, 245, 1)"
});
// Replaces the old style with the new one.
dlrDrawingLayer.setDrawingStyle(newStyleId)

getId

Returns the Id of the DrawingLayer .

getId(): number;

Code Snippet

let enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
let drawingLayer = enhancer.createDrawingLayer();
let drawingLayerId = drawingLayer.getId();

addDrawingItems

Adds DrawingItem (s) to the DrawingLayer .

addDrawingItems(drawingItems: Array<DrawingItem>): void;

Code Snippet

let drawingItems = new Array(
    new DT_Rect(10, 10, 100, 100, 1),
    new DT_Text("label 1", 40, 40, 2),
    new DT_Line({
        x: 10,
        y: 50
    }, {
        x: 90,
        y: 50
    }, 3)
)
let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.addDrawingItems(drawingItems);

See also

DrawingItem

getDrawingItems

Returns all DrawingItem (s) of the DrawingLayer .

getDrawingItems() :Array<DrawingItem>);

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
let drawingItems = drawingLayer.getDrawingItems();

See also

DrawingItem

setDrawingItems

Replaces all DrawingItem (s) of the DrawingLayer with new ones.

setDrawingItems(drawingItems: Array<DrawingItem>): void;

Code Snippet

let newDrawingItems = new Array(
    new DT_Rect(10, 10, 100, 100, 1),
    new DT_Text("label 1", 40, 40, 2),
    new DT_Line({
        x: 10,
        y: 50
    }, {
        x: 90,
        y: 50
    }, 3)
)
let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.setDrawingItems(newDrawingItems);

See also

DrawingItem

hasDrawingItem

Checks out if a DrawingItem belongs to the layer.

hasDrawingItem(drawingItem: DrawingItem): Boolean;

Code Snippet

let drawingItem = new DT_Rect(10, 10, 100, 100, 1);
let drawingLayer = enhancer.getDrawingLayer(100);
let hasDrawingItem = drawingLayer.hasDrawingItem(drawingItem);

See also

DrawingItem

removeDrawingItems

Removes specific DrawingItem (s) from the DrawingLayer .

removeDrawingItems(drawingItems: Array<DrawingItem>): void;

Code Snippet

let drawingItems = new Array(
    new DT_Rect(10, 10, 100, 100, 1),
    new DT_Text("label 1", 40, 40, 2)
)
let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.removeDrawingItems(drawingItems);

See also

DrawingItem

clearDrawingItems

Removes all DrawingItem (s) from the DrawingLayer .

clearDrawingItems(): void;

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.clearDrawingItems();

setDrawingStyle

Sets the style for DrawingItems on the DrawingLayer

• If both “mediaType” and “styleSelector” are ignored, the style will apply to all DrawingItems;
• If “mediaType” is specified, the style will only apply to DrawingItems of that “mediaType”;
• If “mediaType” is “all” and “styleSelector” is specified, the style will apply to all types of DrawingItems which have the specified “styleSelector”;
• If both “mediaType” and “styleSelector” are specified, the style only applies to DrawingItems of the specified “mediaType” which have the specified “styleSelector”.

setDrawingStyle(styleId: number, mediaType?: string, styleSelector?: string): void;

Parameters

styleId: specifies a style by its ID.

mediaType: specifies a mediaType, allowed values are “rect”, “arc”, “line”, “polygon”, “text”, “image” and “all”.

styleSelector: specifies a selector, allowed values are “default”, “selected” and “all”.

Code Snippet

//set style 1 for all the DrawingItems on the `DrawingLayer`
drawingLayer.setDrawingStyle(1);
//set style 1 for all Rect-shape DrawingItems on the `DrawingLayer`
drawingLayer.setDrawingStyle(1, "rect");
//set style 1 for all selected DrawingItems on the `DrawingLayer`
drawingLayer.setDrawingStyle(1, "all", "selected");
//set style 1 for all Rect-shape and selected DrawingItems on the `DrawingLayer`
drawingLayer.setDrawingStyle(1, "rect", "selected");

See also

DrawingStyle

setVisible

Shows or hides the DrawingLayer .

setVisible(visibility: boolean): void;

Parameters

visibility: Specifies true to show and false to hide the DrawingLayer .

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.setVisible(false);

isVisible

Returns whether the DrawingLayer is visible.

isVisible(): boolean;

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
let isVisible = drawingLayer.isVisible();

renderAll

Renders all DrawingItems , usually required when

• One or multiple DrawingItems have altered their DrawingStyle IDs;
• One or multiple DrawingItems have changed their properties such as the coordinates for the top-left corner of a DT_Rect item.

renderAll(): boolean;

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.getDrawingItems()[0].styleId = customId;
drawingLayer.getDrawingItems()[0].set("x", 100);
let isRenderedAll = drawingLayer.renderAll();

onSelectionChange

An event handler that is triggered when different DrawingItem (s) gets selected/deselected on the DrawingLayer .

onSelectionChange: (selectedDrawingItems: Array<DrawingItem>, deselectedDrawingItems: Array<DrawingItem>) => void;

Parameters

selectedDrawingItems: specifies the selected DrawingItem objects.

deselectedDrawingItems: specifies the deselected DrawingItem objects.

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.onSelectionChange = (selected, deselected) => {
    //do ...
}

setMode

Changes the mode of the layer.

setMode(newMode: string): void;

Parameters

newMode: specifies the new mode. At present, the allowed values are “editor” and “viewer” and the default is “viewer”.

Compared with the “viewer” mode, the “editor” mode shows the “corners” and a “rotate control point” for a selected DrawingItem, which, when dragged, modify the original shape in different ways.

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
drawingLayer.setMode("editor");

getMode

Returns the current mode.

getMode(): "editor" | "viewer"; 

Return value

The mode of current DrawingLayer .

Code Snippet

let drawingLayer = enhancer.getDrawingLayer(100);
let mode = drawingLayer.getMode();