Class DrawingItem

The DrawingItem class specifies the foundational attributes and functionalities of a graphical element, including shapes, images, or textual sections, intended for rendering on a canvas. Functioning as an abstract class, it cannot be instantiated on its own. Instead, it serves as a blueprint for more specific subclasses, such as QuadDrawingItem, TextDrawingItem, and others, which inherit and tailor these properties and methods to suit diverse graphical requirements and contexts.

In this version, the subclasses include:

• ImageDrawingItem
• LineDrawingItem
• QuadDrawingItem
• RectDrawingItem
• TextDrawingItem

coordinateBase

Returns or sets the coordinate system base with a string:

• “view” for viewport-based coordinates or
• “image” for image-based coordinates.

coordinateBase: string;

drawingLayerId

Returns the numeric ID for the DrawingLayer this DrawingItem belongs to.

readonly drawingLayerId: number;

drawingStyleId

Returns or sets the numeric ID for the DrawingStyle that applies to this DrawingItem.

Invoke renderAll() for the new DrawingStyle to take effect.

drawingStyleId?: number;

mediaType

Returns an enumeration value which indicates the type of this DrawingItem (e.g., image, line, text).

readonly mediaType: EnumDrawingItemMediaType;

See Also

EnumDrawingItemMediaType

getState

Returns the current state of the DrawingItem.

getState(): EnumDrawingItemState;

Parameters

None.

Return Value

The current state of the DrawingItem, of type EnumDrawingItemState.

See Also

EnumDrawingItemState

on

Binds a listener for a specific event.

on(eventName: string, listener: (event: DrawingItemEvent) => void): void;

Parameters

eventName: specifies the event by its name. Allowed events are: mousedown, mouseup, dblclick, mouseover and mouseout.

listener: the event listener.

Return Value

None.

See also

DrawingItemEvent

off

Unbinds a listener for a specific event.

off(eventName: string, listener(event: DrawingItemEvent): void): void;

Parameters

eventName: specifies the event by its name. Allowed events are: mousedown, mouseup, dblclick, mouseover and mouseout.

listener: the event listener.

Return Value

None.

See also

DrawingItemEvent

addNote

Adds a Note object to this DrawingItem.

addNote(note: Note, replace?: boolean): void;

Parameters

note: specifies the Note object.

replace: [Optional] whether to replace an existing note if the notes share the same name.

Return Value

None.

Code Snippet

let item = new Dynamsoft.DCE.DrawingItem.RectDrawingItem({
    x: 100,
    y: 200,
    width: 300,
    height: 300,
    isMeasuredInPercentage: false
});
item.addNote(
    {
        name: "Description", 
        content: {
            noteType: "Rectangle"
        }
    }, true
);

See also

Note

getNote

Returns a Note object specified by its name, if it exists.

getNote(name: string): Note;

Parameters

name: specifies the name of the Note object.

Return Value

The corresponding Note object specified by its name, if it exists.

Code Snippet

item.getNote("Description");

getNotes

Returns a collection of all existing Note objects on this DrawingItem.

getNotes(): Array<Note>;

Code Snippet

item.getNotes();

Parameters

None.

Return Value

All existing Note objects on this DrawingItem.

See Also

Note

hasNote

Checks if a Note object with the specified name exists.

hasNote(name: string): boolean;

Parameters

name: specifies the name of the Note object.

Return Value

Boolean indicating whether the Note object exists.

Code Snippet

item.hasNote("Description");

updateNote

Updates the content of a specified Note object.

updateNote(name: string, content: any, mergeContent?: boolean): void;

Parameters

name: specifies the name of the Note object.

content: specifies the new content, can be of any type.

mergeContent: [Optional] whether to merge the new content with the existing one.

Return Value

None.

Code Snippet

item.updateNote(
    "Description", 
    {
        timeStamp: (new Date()).getTime()
    }, true
);

deleteNote

Deletes a Note object specified by its name.

deleteNote(name: string): void;

Parameters

name: specifies the name of the Note object.

Return Value

None.

Code Snippet

item.deleteNote("Description");

clearNotes

Deletes all Note objects on this DrawingItem.

clearNotes(): void;

Parameters

None.

Return Value

None.

Code Snippet

item.clearNotes();