Text and Objects

Text and Objects tools are a set of tools or functions used to add text and various objects to the current layer. These tools can be added to the toolbar using the PaintToolsPlugin.

The Text and Objects Tool button () opens a secondary toolbar with buttons for adding text and objects, and a properties panel that will display configurable options for the selected option.

The following table lists the options available in the Text and Objects Tools secondary toolbar:

Icon	Name	Description
	Text	The Text button adds text on top of the image at the desired position.
	Rectangle	The Rectangle button adds a rectangular shape on top of the image at the desired position.
	Line	The Line button draws a straight line on top of the image at the desired position. Multiple line endings are provided.
	Arrow	The Arrow button is a convenience object for drawing an arrow on top of the image at the desired position.
	Ellipse	The Ellipse button adds an oval/circular shape on top of the image at the desired position.
	Brackets	The Brackets button adds brackets with adjustable curves/arrows on top of the image at the desired position.
	Image	The Image button inserts an image file on top of the background image at the desired position.
	Undo	The Undo button reverts the image to its state before the last change.
	Redo	The Redo button changes the image to its state after the last change.
	Apply	The Apply button accepts all the changes and applies them to the image.
	Cancel	The Cancel button discards all the changes and reverts the image to its original state.

Note: For more information on adding PaintToolsPlugin to DsImageViewer toolbar, refer to Using Plug-ins.

The following tables list the configurable options for each selected text/object.

Text

Property	Description
Font Name	Font family selection.
Font Size	Text size in pixels.
Text Color	Text color.
Italic	Toggles italic style.
Bold	Toggles bold style.
Opacity	Transparency (0–100%).
Rotation	Rotation angle (0–360°).

Rectangle

Property	Description
Border Color	Border color.
Fill Color	Inner fill color.
Line Width	Border thickness (px).
Opacity	Transparency (0–100%).
Rotation	Rotation angle (0–360°).

Line

Property	Description
Line Color	Line color.
Line Width	Line thickness (px).
Start Cap Style	Style of the line start cap. Available styles: none, openArrow, closedArrow, dot, circle, diamond, square, slash, star, bar.
End Cap Style	Style of the line end cap. Same options as start cap.
Cap Size	Size of the line cap (e.g., arrowhead size).
Cap Color	Color of the line caps.
Opacity	Transparency (0–100%).
Rotation	Rotation angle (0–360°).

Arrow

The properties for the Arrow object are the same as those for the Line object, with the main difference that the End Cap Style is preset to 'closedArrow' by default for convenience.

Ellipse

Property	Description
Border Color	Border color.
Fill Color	Inner fill color.
Line Width	Border thickness (px).
Opacity	Transparency (0–100%).
Rotation	Rotation angle (0–360°).

Brackets

Property	Description
Line Color	Color of the bracket outline.
Line Width	Stroke thickness of the brackets (in px).
Opacity	Transparency level (0 = transparent, 100 = opaque).
Rotation	Rotation angle applied to the brackets.
Shape	Visual style of brackets: curly {}, round (), square [], angle <>, or custom.
Arrow Direction	Bending direction of brackets.
Curve Intensity	Controls how much the brackets curve (0.0–2.0).
Arrow Intensity	Controls sharpness or depth of the inner bend (0.0–1.5).
Left Bracket	Show or hide the left-side bracket.
Right Bracket	Show or hide the right-side bracket.
Bracket Width (%)	Horizontal size of each bracket relative to total width.

Image

Property	Description
Image	Image upload/replacement. Allows selecting or changing the image displayed.
Border Color	Color of the image border.
Border Width	Thickness of the border in pixels.
Border Radius	Radius of the border corners in pixels, enabling rounded corners.
Fill Color	Background fill color used to fill any empty space within the image’s bounding rectangle. This is especially useful when Keep Aspect Ratio is enabled - unused space around the image is filled with this color. Also, if the image contains transparent areas, these regions are filled with this color to improve visual consistency.
Opacity	Transparency level of the entire image object. 0% is fully transparent, 100% is fully opaque.
Rotation	Rotation angle of the image, from 0° to 360°.
Keep Aspect Ratio	When enabled (true), preserves the original aspect ratio of the image during resizing, potentially creating empty space filled with the Fill Color. When disabled (false), the image stretches to fill the container.

Displaying Text and Objects Tools on Image Load

This example demonstrates how to configure the DsImageViewer to show only text and objects tools when an image loads, while hiding other tool groups (paint, effects).

viewer.addPlugin(new PaintToolsPlugin({ 
  toolbarLayout: { 
    paintTools: false,    // Hide painting tools
    effectsTools: false,  // Hide effects tools
    objectTools: true     // Show text and objects tools
  }
}));
viewer.open("./nature.jpg").then(() => {
  viewer.showSecondToolbar("objects"); // Display object toolbar post-load
});

Work with Text/Objects

DsImageViewer allows you to add, edit, and move text/objects as per your needs. For simplicity, one example working with text and one working with an object is shown below: