节点文字

默认节点由图片和文本标签组成，其中文本标签为节点的name属性，支持换行，通过设置LABEL相关样式，可以更改字体大小、颜色以及文本标签背景效果

文本样式

示例，设置文本标签样式，实现渐变背景和冒泡效果

var nodeWithLabel = graph.createNode("Node with \nLabel", -120, -110);
nodeWithLabel.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
nodeWithLabel.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
nodeWithLabel.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
nodeWithLabel.setStyle(Q.Styles.LABEL_BORDER, 1);
nodeWithLabel.setStyle(Q.Styles.LABEL_POINTER, true);
nodeWithLabel.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
nodeWithLabel.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);

运行效果：

多个文本标签

通过添加孩子组件可以实现多个文本标签，每个文本标签可放置在不同的位置，并设置不同的样式和信息

示例

为节点增加一个描述文本标签，放置在节点后面

var graph = new Q.Graph('canvas');
function createTextWithDescription(text, description, x, y){
    var text = graph.createText(text, x, y);
    text.setStyle(Q.Styles.LABEL_BACKGROUND_COLOR, "#2898E0");
    text.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, new Q.Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, ['#00d4f9', '#1ea6e6'], null, Math.PI/2));
    text.setStyle(Q.Styles.LABEL_COLOR, "#FFF");
    text.setStyle(Q.Styles.LABEL_BORDER, 0.5);
    text.setStyle(Q.Styles.LABEL_PADDING, 4);
    text.setStyle(Q.Styles.LABEL_BORDER_STYLE, "#1D4876");
    text.setStyle(Q.Styles.LABEL_RADIUS, 0);
    text.setStyle(Q.Styles.LABEL_SIZE, new Q.Size(60, 25));
    text.setStyle(Q.Styles.SELECTION_COLOR, "#0F0");
    var label1 = new Q.LabelUI();
    label1.border = 0.5;
    label1.borderColor = "#DDD";
    label1.borderRadius = 0;
    label1.size = new Q.Size(150, 25);
    label1.padding = 4;
    label1.alignPosition = Q.Position.LEFT_MIDDLE;
    label1.position = Q.Position.RIGHT_MIDDLE;
    label1.anchorPosition = Q.Position.LEFT_MIDDLE;
    text.addUI(label1, [{
        bindingProperty : "data",
        property : "description",
        propertyType : Q.Consts.PROPERTY_TYPE_CLIENT
    }]);
    text.set("description", description);
    return text;
}
var text = createTextWithDescription("TEXT", "描述");
var a = graph.createNode("HELLO", -100, -50);
graph.createEdge(a, text);

运行效果

ScreenShot 2014-06-05 at 下午4.18.03.png (image/png)
ScreenShot 2014-06-06 at 下午12.11.13.png (image/png)
ScreenShot 2014-06-06 at 下午12.15.49.png