PP.Ui.CanvasLabel(settings: Object);
settings. JSON object that contains values of canvas label properties.
The CanvasLabel constructor creates a canvas label object.
To execute the example the HTML page must contain the TreeMap component named (see Example of Creating the TreeMap Component). Create the Southern Europe Countries label on the tree map canvas:
// Get tree map canvas settings
var canvasContext = treeMap.getCanvasContext();
// Create a label mark
var canvasLabel = new PP.Ui.CanvasLabel({
AutoOrientation: False, // Label autoorientation is prohibited
CanvasContext: canvasContext, // Label render context
Circular: True, // Display label as a circle
Padding: [25, 0, 0, 0], // Internal margins of label
Position: {
Height: 120,
Left: 290,
Top: 210,
Width: 210
}, // Label position
Style: { // Label style
Release: {
Border: {
PPType: "PP.Border",
Width: 3 // Label border width
}
}
},
TextWrapping: PP.Ui.TextWrapping.Wrap, // Text wrap
Values: {
Name: "Southern Europe Countries" // Label text
},
Vertical: True // Label vertical alignment
});
// Determine label fill color
var brush = new PP.SolidColorBrush({
Color: "#ffffff"
});
// Set label fill color
canvasLabel.setBackground(brush);
// Set fill transparency
canvasLabel.setOpacity(0.9);
// Set label font color
canvasLabel.setFontColor("#ff462c");
// Determine and set label border color
var borderColor = new PP.Color("#999999");
canvasLabel.setBorderColor(borderColor);
// Refresh label text
canvasLabel.updateContent();
// Rerender canvas label
canvasLabel.draw(True, True);
console.log("Tooltip offset relative to canvas equals to %s", canvasLabel.getTooltipOffset());
After executing the example a label with the Southern Europe Countries text is rendered on the tree map canvas. This label is directed vertically, has white fill with the transparency of 90%, grey border 2 pixels wide and left internal margin of 25 pixels:
Label text is red and is wrapped by words. Now set a new value of maximum acceptable font size:
// Set maximum font size canvasLabel.setMaxSize(12); // Rerender label on canvas canvasLabel.draw();
After executing the example font size is decreased according to the new maximum acceptable value:
