Qunee for HTML5 - 中文 : 样式列表

Qunee中通过样式属性控制图元的显示效果

设置样式

下面的代码用于设置连线不显示结束端箭头

edge.setStyle(Q.Styles.ARROW_TO, false);

样式列表

下面是分类样式列表

ALPHA相关样式

样式名参考值
ALPHA图元的透明度,默认值为:1 

示例:

var node = graph.createNode("hello");
node.setStyle(Q.Styles.ALPHA, 0.5);
var node = graph.createNode("qunee", -20, 10);
node.setStyle(Q.Styles.ALPHA, 0.5);

运行效果

ARROW_FROM相关样式

用于设置起始端箭头的相关样式

var graph = new Q.Graph("canvas");
var hello = graph.createNode("Hello", -100, -50);
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
edge.setStyle(Q.Styles.ARROW_FROM, Q.Consts.SHAPE_CIRCLE);
edge.setStyle(Q.Styles.ARROW_FROM_FILL_COLOR, "#2898E0");
edge.setStyle(Q.Styles.ARROW_FROM_FILL_GRADIENT, Q.Gradient.LINEAR_GRADIENT_HORIZONTAL);
edge.setStyle(Q.Styles.ARROW_FROM_SIZE, {width: 30, height: 30});

运行效果:

样式名参考值
ARROW_FROM 起始端箭头类型,可设置为 Q.Consts.SHAPE_*
ARROW_FROM_FILL_COLOR填充颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
ARROW_FROM_FILL_GRADIENT填充渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
ARROW_FROM_LINE_CAP线条顶点样式,可设置为Q.Consts.LINE_CAP_*
ARROW_FROM_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
ARROW_FROM_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
ARROW_FROM_LINE_JOIN线条拐点样式,而设置为Q.Consts.LINE_JOIN_*
ARROW_FROM_OFFSET

箭头偏移量,支持数值类型,或者包含x,y属性的对象,比如:{x: 80}

 

ARROW_FROM_SIZE默认值为:10 
箭头尺寸,支持数值,或者包含width,height属性的对象,比如: {width: 100}
ARROW_FROM_OUTLINE箭头外边框粗细
ARROW_FROM_OUTLINE_STYLE箭头外边框样式,可设置颜色
ARROW_FROM_STROKE边线粗细,数值类型
ARROW_FROM_STROKE_STYLE边线样式,可设置为颜色,比如#2898E0

ARROW_TO相关样式

样式名参考值
ARROW_TO结束端箭头类型,可设置为 Q.Consts.SHAPE_*,默认值为:true 
ARROW_TO_FILL_COLOR填充颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
ARROW_TO_FILL_GRADIENT填充渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
ARROW_TO_LINE_CAP线条顶点样式,可设置为Q.Consts.LINE_CAP_*
ARROW_TO_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
ARROW_TO_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
ARROW_TO_LINE_JOIN线条拐点样式,而设置为Q.Consts.LINE_JOIN_*
ARROW_TO_OFFSET箭头偏移量,支持数值类型,或者包含x,y属性的对象,比如:{x: 80}
ARROW_TO_SIZE默认值为:10 
箭头尺寸,支持数值,或者包含width,height属性的对象,比如: {width: 100}
ARROW_TO_OUTLINE箭头外边框粗细
ARROW_TO_OUTLINE_STYLE箭头外边框样式,可设置颜色
ARROW_TO_STROKE边线粗细,数值类型
ARROW_TO_STROKE_STYLE边线样式,可设置为颜色,比如#2898E0

BACKGROUND相关样式

var graph = new Q.Graph("canvas");
var hello = graph.createNode("Hello");
hello.setStyle(Q.Styles.BACKGROUND_COLOR, "#2898E0");
hello.setStyle(Q.Styles.BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);
hello.setStyle(Q.Styles.PADDING, new Q.Insets(10, 20));

运行效果

样式名参考值
BACKGROUND_COLOR填充颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
BACKGROUND_GRADIENT填充渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])

BORDER相关样式

var hello = graph.createNode("Hello");
hello.setStyle(Q.Styles.BORDER, 2);
hello.setStyle(Q.Styles.BORDER_COLOR, "#2898E0");
hello.setStyle(Q.Styles.PADDING, new Q.Insets(10, 20));

运行效果

样式名参考值
BORDER边框粗细
BORDER_COLOR边框颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
BORDER_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
BORDER_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
BORDER_RADIUS圆角,支持数值或者包含x,y属性的对象,比如: {x: 10, y: 5}

EDGE相关样式

var hello = graph.createNode("Hello", -100, -50);
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
edge.setStyle(Q.Styles.EDGE_COLOR, "#2898E0");
edge.setStyle(Q.Styles.EDGE_WIDTH, 3);

运行效果

样式名参考值
EDGE_COLOR默认值为:#555555 
连线颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
EDGE_CONTROL_POINT连线控制点位置,包含x,y属性的对象,比如:{x:100, y:100}
EDGE_CORNER默认值为:round 
连线拐角类型,可设置为:Q.Consts.EDGE_CORNER_*
EDGE_CORNER_RADIUS默认值为:8 
拐角圆角大小,数值类型
EDGE_EXTEND默认值为:20 
EDGE_FROM_OFFSET偏移量,支持数值类型,或者包含x,y属性的对象,比如:{x: 80}
EDGE_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
EDGE_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
EDGE_LOOPED_EXTAND默认值为:10 
EDGE_SPLIT_BY_PERCENT默认值为:true 
EDGE_SPLIT_PERCENT默认值为:0.5 
EDGE_SPLIT_VALUE默认值为:20 
EDGE_OUTLINE连线边框线宽,数值类型,默认为0
EDGE_OUTLINE_STYLE连线边框线样式,可设置为颜色,比如#2898E0
EDGE_FROM_AT_EDGE

Edge endpoint at node icon edge, the default value: true

see EDGE_TO_AT_EDGE

EDGE_TO_AT_EDGE

Edge endpoint at node icon edge, the default value: true

EDGE_TO_OFFSET偏移量,支持数值类型,或者包含x,y属性的对象,比如:{x: 80}
EDGE_WIDTH默认值为:1 

EDGE_BUNDLE相关样式

var hello = graph.createNode("Hello", -100, -50);
var qunee = graph.createNode("Qunee", 100, 50);
function createEdge(gap){
    var edge = graph.createEdge("Edge", hello, qunee);
    edge.setStyle(Q.Styles.EDGE_BUNDLE_GAP, gap);
    edge.setStyle(Q.Styles.EDGE_BUNDLE_LABEL_BACKGROUND_COLOR, "#2898E0");
    edge.setStyle(Q.Styles.EDGE_BUNDLE_LABEL_PADDING, 3);
    return edge;
}
createEdge(10);
createEdge(20);
createEdge(30);

运行效果

样式名参考值
EDGE_BUNDLE_GAP默认值为:20 
间隙,数值类型
EDGE_BUNDLE_LABEL_ANCHOR_POSITION默认值为:cb 
对齐位置,支持Q.Position类型,比如:Q.Position.CENTER_TOP
EDGE_BUNDLE_LABEL_BACKGROUND_COLOR颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
EDGE_BUNDLE_LABEL_BACKGROUND_GRADIENT渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
EDGE_BUNDLE_LABEL_BORDER边框粗细,数值类型
EDGE_BUNDLE_LABEL_BORDER_STYLE边框样式,可设置为颜色,比如#2898E0
EDGE_BUNDLE_LABEL_COLOR默认值为:#075bc5 
颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
EDGE_BUNDLE_LABEL_FONT_FAMILY字体家族,比如:helvetica arial
EDGE_BUNDLE_LABEL_FONT_SIZE字体大小,支持数值,单位为像素
EDGE_BUNDLE_LABEL_FONT_STYLE字体样式,比如:lighter
EDGE_BUNDLE_LABEL_OFFSET_Xx偏移量,数值类型
EDGE_BUNDLE_LABEL_OFFSET_Y 
EDGE_BUNDLE_LABEL_PADDING内间距,支持数值或者Q.Insets类型,比如:new Q.Insets(10, 5)
EDGE_BUNDLE_LABEL_POINTER冒泡指针,boolean类型,true或者false
EDGE_BUNDLE_LABEL_POINTER_WIDTH冒泡指针宽度,数值类型
EDGE_BUNDLE_LABEL_POSITION默认值为:ct 
对齐位置,支持Q.Position类型,比如:Q.Position.CENTER_TOP
EDGE_BUNDLE_LABEL_RADIUS圆角,支持数值或者包含x,y属性的对象,比如: {x: 10, y: 5}
EDGE_BUNDLE_LABEL_ROTATABLE是否可旋转,boolean类型
EDGE_BUNDLE_LABEL_ROTATE旋转角度,数值类型,比如Math.PI/2

GROUP相关样式

var hello = graph.createNode("Hello", -100, -50);
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello &&&\nQunee", hello, qunee);
var group = graph.createGroup();
group.addChild(hello);
group.addChild(qunee);
group.groupType = Q.Consts.GROUP_TYPE_ELLIPSE;
group.setStyle(Q.Styles.GROUP_BACKGROUND_COLOR, Q.toColor(0xCCfcfb9b));
group.setStyle(Q.Styles.GROUP_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_HORIZONTAL);

运行效果

样式名参考值
GROUP_BACKGROUND_COLOR默认值为:rgba(238,238,238,0.80) 
颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
GROUP_BACKGROUND_GRADIENT渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
GROUP_STROKE默认值为:1 
边线粗细,数值类型
GROUP_STROKE_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
GROUP_STROKE_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
GROUP_STROKE_STYLE默认值为:#000 
边线样式,可设置为颜色,比如#2898E0

IMAGE相关样式

节点图片设置

var hello = graph.createNode("Hello", -100, -50);
hello.setStyle(Q.Styles.IMAGE_BACKGROUND_COLOR, "#2898E0");
hello.setStyle(Q.Styles.IMAGE_PADDING, 5);

运行效果

样式名参考值
IMAGE_ADJUST

 图片调整模式,支持上下翻转和水平镜像两种模式:

Q.Consts.IMAGE_ADJUST_FLIP

Q.Consts.IMAGE_ADJUST_MIRROR

imageAdjust.setStyle(Q.Styles.IMAGE_ADJUST, Q.Consts.IMAGE_ADJUST_MIRROR);

IMAGE_ALPHA图片透明度, 0-1
IMAGE_BACKGROUND_COLOR颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
IMAGE_BACKGROUND_GRADIENT渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
IMAGE_BORDER边框粗细,数值类型
IMAGE_BORDER_COLOR颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
IMAGE_BORDER_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
IMAGE_BORDER_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
IMAGE_BORDER_RADIUS圆角,支持数值或者包含x,y属性的对象,比如: {x: 10, y: 5}
IMAGE_BORDER_STYLE边框样式,可设置为颜色,比如#2898E0
IMAGE_PADDING内间距,支持数值或者Q.Insets类型,比如:new Q.Insets(10, 5)
IMAGE_RADIUS圆角,支持数值或者包含x,y属性的对象,比如: {x: 10, y: 5}

LABEL相关样式

var text = graph.createText("Qunee for HTML5");
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(120, 40));
text.setStyle(Q.Styles.SELECTION_COLOR, "#0F0");

运行效果

样式名参考值
LABEL_ALIGN_POSITION对齐位置,支持Q.Position类型,比如:Q.Position.CENTER_TOP
LABEL_ANCHOR_POSITION默认值为:ct 
对齐位置,支持Q.Position类型,比如:Q.Position.CENTER_TOP
LABEL_BACKGROUND_COLOR默认值为:null 
颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
LABEL_BACKGROUND_GRADIENT默认值为:null 
渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
LABEL_BORDER默认值为:0 
边框粗细,数值类型
LABEL_BORDER_STYLE默认值为:#000 
边框样式,可设置为颜色,比如#2898E0
LABEL_COLOR默认值为:#333 
颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
LABEL_FONT_FAMILY字体家族,比如:helvetica arial
LABEL_FONT_SIZE字体大小,支持数值,单位为像素
LABEL_FONT_STYLE字体样式,比如:lighter
LABEL_OFFSET_Xx偏移量,数值类型
LABEL_OFFSET_Y 
LABEL_PADDING默认值为:[object Object] 
内间距,支持数值或者Q.Insets类型,比如:new Q.Insets(10, 5)
LABEL_POINTER默认值为:true 
冒泡指针,boolean类型,true或者false
LABEL_POINTER_WIDTH默认值为:8 
冒泡指针宽度,数值类型
LABEL_POSITION默认值为:cb 
对齐位置,支持Q.Position类型,比如:Q.Position.CENTER_TOP
LABEL_RADIUS默认值为:8 
圆角,支持数值或者包含x,y属性的对象,比如: {x: 10, y: 5}
LABEL_ROTATABLE默认值为:true 
是否可旋转,boolean类型
LABEL_ROTATE旋转角度,数值类型,比如Math.PI/2
LABEL_SIZE尺寸,支持数值,或者包含width,height属性的对象,比如: {width: 100}
LABEL_SHADOW_BLUR文本标签阴影模糊距离
LABEL_SHADOW_COLOR文本标签阴影颜色
LABEL_SHADOW_OFFSET_X文本标签阴影X偏移量
LABEL_SHADOW_OFFSET_Y文本标签阴影Y偏移量

LAYOUT相关样式

参看后面LINE相关样式的示例

样式名参考值
LAYOUT_BY_PATHboolean,是否按路径布局,适用于ShapeNode和Edge,作用于图元挂载的孩子组件

LINE相关样式

线条顶点样式(lineCap) - butt, round, square

线条拐点样式 - lineJoin - miter, round, bevel

路径的线段端点和拐点样式

 var graph = new Q.Graph("canvas");
function createShape(join, x, y){
    var shape = graph.createShapeNode(join, x, y);
    shape.moveTo(-50, 50);
    shape.lineTo(0, 0);
    shape.lineTo(50, 50);
    shape.setStyle(Q.Styles.SHAPE_STROKE, 10);
    shape.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#2898E0");
    shape.setStyle(Q.Styles.LAYOUT_BY_PATH, true);
    shape.setStyle(Q.Styles.SHAPE_FILL_COLOR, null);
    shape.setStyle(Q.Styles.LINE_CAP, Q.Consts.LINE_CAP_TYPE_BUTT);
    shape.setStyle(Q.Styles.LINE_JOIN, join);
    return shape;
}
createShape(Q.Consts.LINE_JOIN_TYPE_BEVEL, -150, 0);
createShape(Q.Consts.LINE_JOIN_TYPE_MITER, 0, 0);
createShape(Q.Consts.LINE_JOIN_TYPE_ROUND, 150, 0);

运行效果

样式名参考值
LINE_CAP线条顶点样式,可设置为Q.Consts.LINE_CAP_*
LINE_JOIN线条拐点样式,而设置为Q.Consts.LINE_JOIN_*

PADDING相关样式

样式名参考值
PADDING节点内间距,在设置背景或边线时可以看到间距效果

RENDER相关样式

颜色渲染,可参看在线演示

染色效果

样式名参考值
RENDER_COLOR颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
RENDER_COLOR_BLEND_MODE默认值为:linear.burn 

SELECTION相关样式

示例

var graph = new Q.Graph("canvas");
var node = graph.createNode("node");
node.setStyle(Q.Styles.SELECTION_SHADOW_BLUR, 10);
node.setStyle(Q.Styles.SELECTION_COLOR, '#8F8');
node.setStyle(Q.Styles.SELECTION_SHADOW_OFFSET_X, 2);
node.setStyle(Q.Styles.SELECTION_SHADOW_OFFSET_Y, 2);

运行选中效果

chrome下阴影的模糊效果不佳

样式名参考值
SELECTION_BORDER默认值为:1 
边框粗细,数值类型
SELECTION_COLOR默认值为:rgba(0,34,255,0.80) 
颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
SELECTION_SHADOW_BLUR默认值为:7 
SELECTION_SHADOW_OFFSET_X

默认值为:2

选中阴影x偏移量

SELECTION_SHADOW_OFFSET_Y

默认值为:2

选中阴影y偏移量

SHADOW相关样式

样式名参考值
SHADOW_BLUR图元阴影模糊距离
SHADOW_COLOR图元阴影颜色
SHADOW_OFFSET_X图元阴影X偏移量
SHADOW_OFFSET_Y图元阴影Y偏移量

示例

var nodeWithScale = graph.createNode("Node with Scale\nand Render Color", 0, 110);
nodeWithScale.size = {width: 100, height: -1};
nodeWithScale.rotate = -Math.PI / 6;
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);

运行效果

SHAPE相关样式

样式名参考值
SHAPE_FILL_COLOR颜色,可设置为下面的格式:#2898E0, rgba(22,33,240,0.5)
SHAPE_FILL_GRADIENT渐变,可使用Q.Gradient实例,比如:new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
SHAPE_LINE_DASH线条虚线样式,使用数组格式,比如:[2, 5]
SHAPE_LINE_DASH_OFFSET线条虚线偏移量,数值类型,动态修改该属性可实现虚线流动效果
SHAPE_STROKE默认值为:1 
边线粗细,数值类型
SHAPE_STROKE_STYLE边线样式,可设置为颜色,比如#2898E0
SHAPE_OUTLINE

默认为:0

外边框线宽,数值类型,默认为 undefined

SHAPE_OUTLINE_STYLE

外边框线样式,可设置颜色,比如#2898E0,默认为 undefined