Page tree
Skip to end of metadata
Go to start of metadata

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

设置样式

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

样式列表

下面是分类样式列表

ALPHA相关样式

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

示例:

运行效果

ARROW_FROM相关样式

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

运行效果:

样式名参考值
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相关样式

运行效果

样式名参考值
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相关样式

运行效果

样式名参考值
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相关样式

运行效果

样式名参考值
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相关样式

运行效果

样式名参考值
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相关样式

运行效果

样式名参考值
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相关样式

节点图片设置

运行效果

样式名参考值
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相关样式

运行效果

样式名参考值
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

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

运行效果

样式名参考值
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相关样式

示例

运行选中效果

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偏移量

示例

运行效果

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

  • No labels