Customizing Node Appearance

Nodes can have different shape, background image or color.  They can also have differently aligned text.

Customizing the shape of nodes

ShapeNode exposes a shape property that specifies the geometric shape of the node. Its value can be set to 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.shape = "Arrow1";

TableNode and ContainerNode provide shape properties too, but their shapes can only be set to either rectangle or rounded rectangle, as specified via SimpleShape enumeration.

Bitmap images

Each node can display a bitmap image as its content. The image can be set either via the image or imageContent properties, where the former accepts DOM Image instances, and the latter accepts base64-encoded bitmaps. By default the bitmap is drawn centered inside the node. You can change the alignment by setting imageAlign. Images can also be loaded by URL via the imageLocation property.

Fill color

Nodes can be painted in any color that you choose. Set the brush property to specify how a node is painted.

JavaScript

myNode.brush = "Red";

Linear gradients

Nodes can be filled using linear gradients by assigning objects in following format to brush. If the gradient should blend only two colors, they can be specified using color1 and color2 fields instead of colorStops.

JavaScript

var brush1 =
{
 type: "LinearGradientBrush",
 colorStops:
 [
  { position: 0, color: "red" },
  { position: 0.5, color: "green" },
  { position: 1, color: "blue" }
 ],
 angle: 30
};
myNode.brush = brush1;

Radial gradients

Nodes can be filled using radial gradients by assigning objects in following format to brush. If the gradient should blend only two colors, they can be specified using color1 and color2 fields instead of colorStops.

JavaScript

var brush2 =
{
 type: "RadialGradientBrush",
 colorStops:
 [
  { position: 0, color: "white" },
  { position: 0.5, color: "lightGray" },
  { position: 1, color: "blue" }
 ],
 x1: 20, y1: 20, radius1: 30,
 x2: 40, y2: 20, radius2: 80
};
myNode.brush = brush2;

Text and font

Nodes can display text with customizable font and horizontal/vertical alignment. Set the text property to specify the text label for a node, and textColor to change its color. textAlignment and lineAlignment properties let you set respectively horizontal and vertical alignment. The font property lets you specify a distinct font for each node:

JavaScript

var Font = MindFusion.Drawing.Font;

//the bool arguments specify whether the font is bold and italic
startNode.font = new Font("sans-serif", 5, true, false);

Apart from main text content, the NodeLabel class lets you display additional labels and pin them to node's edges or corners. Call the addLabel method to create such supplementary labels, and use NodeLabel (and base ItemLabel) properties and methods to customize their appearance and position.

Styled Text

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.
<sub>text</sub>	Indicates subscript.
<sup>text</sup>	Indicates superscript.
<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.
<a=url>text</a>	Renders specified text as a hyperlink and raises hyperlinkClicked event when link has been clicked.
<size=N>text</size>	Changes the font size.