Qunee学习笔记1

• graph的属性

var textNode = graph.createText("Text and\nRotatable", -240, 110);
var hello    = graph.createNode("Hello", -100, -50);

• node 的属性

//图片支持png,svg,gif
.image = Q.Graphs.server;     //内置服务器图片
.image = "./images/SVG_logo.svg";
.size = {width: 203，height: 70};
.rotate = Math.PI / 6;//设置旋转角度
.setStyle(Q.Styles.ALPHA, 0.5);//设置透明度
.setStyle(Q.Styles.IMAGE_ADJUST, Q.Consts.IMAGE_ADJUST_MIRROR);//设置镜像

• Q.Styles

textNode.setStyle(Q.Styles.LABEL_FONT_SIZE, 20);
textNode.setStyle(Q.Styles.LABEL_FONT_STYLE, "italic lighter");
textNode.setStyle(Q.Styles.BORDER, 1);
textNode.setStyle(Q.Styles.BORDER_COLOR, "#DDD");
textNode.setStyle(Q.Styles.PADDING, 5);
nodeWithScale.setStyle(Q.Styles.RENDER_COLOR, "#E21667");//渲染颜色
//阴影
nodeWithScale.setStyle(Q.Styles.SHADOW_COLOR, "#888");
nodeWithScale.setStyle(Q.Styles.SHADOW_OFFSET_X, 5);
nodeWithScale.setStyle(Q.Styles.SHADOW_OFFSET_Y, 5);
nodeWithScale.setStyle(Q.Styles.SHADOW_BLUR, 5);

开始

var graph = new Q.Graph(canvas);//创建实例
//创建节点（text,x,y）
var hello = graph.createNode("Hello", -100, -50);
//指定节点图片，若无指定，默认为电脑图片

hello.image = Q.Graphs.server;
//创建箭头连接（文本，节点1，节点2）箭头由节点1指向节点2
var edge = graph.createEdge("Hello\nQunee", hello, qunee);

• 设置箭头上文本样式（默认无文本框，在箭头下方）

//文本离箭头的Y距离,正值往下偏，负值往上偏
edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
//文本框相对于箭头的位置,注意修改LABEL_OFFSET_Y值
edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
//文本框尖角相对于文本框的位置
edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
//边框宽度
edge.setStyle(Q.Styles.LABEL_BORDER, 1);
//是否有尖角
edge.setStyle(Q.Styles.LABEL_POINTER, true);
//文字与边框的内间距
edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
//背景颜色渐变（感觉用处不大）
edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);

• 节点添加多个文本标签

var nodeWithLabels = graph.createNode("Node with Labels", 0, -110);
var label1 = new Q.LabelUI();//实例化一个标签
//旋转角度
label1.rotate = -Math.PI / 2;
label1.position = Q.Position.LEFT_MIDDLE;//文本位置
label1.anchorPosition = Q.Position.CENTER_BOTTOM;//锚点位置
label1.data = "Label 1";//文本标签内容
label1.fontStyle = "bolder";//是否加粗
nodeWithLabels.addUI(label1);//绑定节点

var label2 = new Q.LabelUI();
label2.position = Q.Position.CENTER_TOP;
label2.anchorPosition = Q.Position.CENTER_BOTTOM;
label2.border = 1;
label2.padding = new Q.Insets(2, 5);
label2.showPointer = true;
label2.offsetY = -10;
label2.backgroundColor = Colors.yellow;
label2.fontSize = 16;
label2.fontStyle = "italic 100";
nodeWithLabels.addUI(label2, [{
                    property : "label2",
                    propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
                    bindingProperty : "data"
                }, {
                    property : "label2.color",
                    propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
                    bindingProperty : "color"
                }]);

• 设置节点属性

nodeWithLabels.set("label2", "another label");
nodeWithLabels.set("label2.color", Colors.blue);

var showLabel1 = true;
var timer = setInterval(function() {
            if (showLabel1) {
                nodeWithLabels.removeUI(label1);
            } else {
                nodeWithLabels.addUI(label1);
            }
            showLabel1 = !showLabel1;
            var now = new Date();
            nodeWithLabels.set("label2", "Wecome to\nyour life. " + now.getMinutes() + ":" + now.getSeconds());
        }, 1000);

• 形状

var nodeWithShape = graph.createNode("Node with Shape", 240, -110);
var circle = Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -30, -5, 60, 30);
var shape = new Q.ImageUI(circle);
shape.position = Q.Position.CENTER_MIDDLE;
shape.layoutByAnchorPoint = false;
shape.name = "A";
shape.lineWidth = 2;//描边宽
shape.strokeStyle = "#000";//描边颜色
shape.fillColor = Q.toColor(0xCCFFFF44);//填充颜色
shape.zIndex = -1;
nodeWithShape.addUI(shape);