Nodes can have different shape, background image or color. They can also have differently aligned text.
ShapeNode has setShape method that sets the shape of the node. The argument can be either a Shape object (returned by one of the static methods of the Shapes class), or a string id of the shape, which coincides with the name of the method that gets it. Here is an example:
JavaScript
![]() |
---|
myNode.setShape("Arrow1"); |
TableNode and ContainerNode provide setShape method too, but their shapes can only be set to either rectangle or rounded rectangle, as specified via SimpleShape enumeration.
Each node can display an image as its content. The image is set via the setImage method. Be default it is centered inside the node. You can change the alignment by calling setImageAlign. Images can be loaded by their URL via setImageLocation.
Nodes can be painted in any color that you choose. Use setBrush to specify how the node is painted.
JavaScript
![]() |
---|
myNode.setBrush("Red"); |
Nodes can be filled using linear gradients by passing objects in following format to setBrush. If the gradient should blend only two colors, they can be specified using color1 and color2 fields instead of colorStops.
JavaScript
![]() |
---|
var brush1 = |
Nodes can be filled using radial gradients by passing objects in following format to setBrush. If the gradient should blend only two colors, they can be specified using color1 and color2 fields instead of colorStops.
JavaScript
![]() |
---|
var brush2 = |
Nodes can have text with customizable font and text alignment. Use setText to specify the text for the node; setTextColor changes the color of the text and setTextAlignment - its alignment. The setFont method lets you specify a distinct font for each node:
JavaScript
![]() |
---|
var Font = MindFusion.Drawing.Font; //the two arguments specify whether the font is bold and italic |
The EnableStyledText property of shape nodes and tables enables or disables styled text rendering. Styled text can have various attributes applied to the characters it contains. The attributes are specified using HTML-like formatting tags embedded in the raw text. The following table lists the currently supported style tags:
Tag | Description |
---|---|
<i>text</i> | Indicates italic text. |
<b>text</b> | Indicates bold text. |
<u>text</u> | Indicates underlined text. |
<color=#RRGGBB>text</color> | Changes the color of the text. The red green and blue color channels are specified as two-digit hexadecimal numbers. |
<br /> | Indicates line break. |