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

The display effect of element can be controlled via the style property in Qunee 

Setting of styles

The following codes are used for setting edges and not displaying arrows at terminal end 

Style List

The following shows the type style list 

ALPHA相关样式

Style NameReference Value
ALPHA

The transparency of the element

default value: 1 

example

run effect


ARROW_FROM related styles

For setting related styles at the start end arrow

Operation effect:

Style nameReference value
ARROW_FROM Type of start end arrow can be set to Q.Consts.SHAPE_*
ARROW_FROM_FILL_COLORFilling color can be set in the following format: #2898E0, rgba(22,33,240,0.5)
ARROW_FROM_FILL_GRADIENTFilling gradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
ARROW_FROM_LINE_CAPLine top style can be set to Q.Consts.LINE_CAP_*
ARROW_FROM_LINE_DASHDotted line style uses array format, such as [2, 5]
ARROW_FROM_LINE_DASH_OFFSETOffset of dotted line, number type, dynamic modification of this property would realize the flow effect of dotted line
ARROW_FROM_LINE_JOINLine inflection point style can be set to Q.Consts.LINE_JOIN_*
ARROW_FROM_OFFSETArrow offset supports number type or includes objects of property x, y, such as {x: 80}
ARROW_FROM_SIZE

Default value is: 10

arrow size, supporting value, or containing objects of property width and height, such as {width: 100}

ARROW_FROM_OUTLINEThe thickness of the outer border of the arrow
ARROW_FROM_OUTLINE_STYLEThe style of the outer border of the arrow, can be set as color
ARROW_FROM_STROKELine thickness and number type
ARROW_FROM_STROKE_STYLEEdge style can be set in certain color, such as #2898E0

ARROW_TO related styles

Style nameReference value
ARROW_TOType of arrows in terminal end, which can be set to Q.Consts.SHAPE_*. The default value is true
ARROW_TO_FILL_COLORFilling color can be set in the following format: #2898E0, rgba(22,33,240,0.5)
ARROW_TO_FILL_GRADIENTFilling gradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
ARROW_TO_LINE_CAPLine top style can be set to Q.Consts.LINE_CAP_*
ARROW_TO_LINE_DASHDotted line style uses array format, such as [2, 5]
ARROW_TO_LINE_DASH_OFFSETOffset of dotted line, number type, dynamic modification of this property would realize the flow effect of dotted line
ARROW_TO_LINE_JOINLine inflection point style can be set to Q.Consts.LINE_JOIN_*
ARROW_TO_OFFSETArrow offset supports number type or includes objects of property x, y, such as {x: 80}
ARROW_TO_SIZE

Default value is: 10

arrow size, supporting value, or containing objects of property width and height, such as {width: 100}

ARROW_TO_OUTLINEThe thickness of the outer border of the arrow
ARROW_TO_OUTLINE_STYLEThe style of the outer border of the arrow, can be set as color
ARROW_TO_STROKELine thickness and number type
ARROW_TO_STROKE_STYLEEdge style can be set in certain color, such as #2898E0

BACKGROUND related styles

Operation effect

Style nameReference value
BACKGROUND_COLORFilling color can be set in the following format: #2898E0, rgba(22,33,240,0.5)
BACKGROUND_GRADIENTFilling gradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])

BORDER related styles

Operation effect

Style nameReference value
BORDERBorder thickness
BORDER_COLORBorder color can be set in the following format: #2898E0, rgba(22,33,240,0.5)
BORDER_LINE_DASHDotted line style uses array format, such as [2, 5]
BORDER_LINE_DASH_OFFSETOffset of dotted line, number type, dynamic modification of this property would realize the flow effect of dotted line
BORDER_RADIUSFillet supports number type or includes objects of property x, y, such as {x: 10, y: 5}

EDGE related styles

Operation effect

Style nameReference value
EDGE_COLOR

Default value is #555555.

Edge color can be set in the following format: #2898E0, rgba(22,33,240,0.5)

EDGE_CONTROL_POINTEdge control point position includes objects of property x, y, such as {x: 100, y: 100}
EDGE_CORNER

Default value: round

Edge reflection corner can be set to: Q.Consts.EDGE_CORNER_*

EDGE_CORNER_RADIUS

Default value: 8

Round corner size, number type

EDGE_EXTENDDefault value: 20
EDGE_FROM_OFFSETOffset supports number type or includes objects of property x, y, such as {x: 80}
EDGE_LINE_DASHDotted line style uses array format, such as [2, 5]
EDGE_LINE_DASH_OFFSETOffset of dotted line, number type, dynamic modification of this property would realize the flow effect of dotted line
EDGE_LOOPED_EXTANDDefault value: 10
EDGE_SPLIT_BY_PERCENTDefault value: true
EDGE_SPLIT_PERCENTDefault value: 0.5
EDGE_SPLIT_VALUEDefault value: 20
EDGE_OUTLINEEdge border width, number type, default to 0
EDGE_OUTLINE_STYLEEdge border style can be set in certain color, such as #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_OFFSETOffset supports number type or includes objects of property x, y, such as {x: 80}
EDGE_WIDTHDefault value: 1

EDGE_BUNDLE related styles

Operation effect

Style nameReference value
EDGE_BUNDLE_GAP

Default value: 20

Gap, number type

EDGE_BUNDLE_LABEL_ANCHOR_POSITION

Default value: "cb"

Aligns position, and supports Q.Position type, such as: Q.Position.CENTER_

EDGE_BUNDLE_LABEL_BACKGROUND_COLORColor can be set in the following format: #2898E0, rgba(22,33,240,0.5)
EDGE_BUNDLE_LABEL_BACKGROUND_GRADIENT

Gradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])

EDGE_BUNDLE_LABEL_BORDERBorder thickness and number type
EDGE_BUNDLE_LABEL_BORDER_STYLEBorder style can be set in certain color, such as #2898E0
EDGE_BUNDLE_LABEL_COLOR

Default value is #075bc5.

It can be set in the following format: #2898E0, rgba(22,33,240,0.5)

EDGE_BUNDLE_LABEL_FONT_FAMILYFont family, such as helvetica arial
EDGE_BUNDLE_LABEL_FONT_SIZEFont size supports value, unit: pixel
EDGE_BUNDLE_LABEL_FONT_STYLEFont style, such as: lighter
EDGE_BUNDLE_LABEL_OFFSET_XOffset x, number type
EDGE_BUNDLE_LABEL_OFFSET_Y

Offset y, number type 

EDGE_BUNDLE_LABEL_PADDINGInternal gap supports value or Q.Inserts type, such as: new Q.Insets(1 5)
EDGE_BUNDLE_LABEL_POINTERBubble pointer, boolean type, true or false
EDGE_BUNDLE_LABEL_POINTER_WIDTHBubble pointer width, number type
EDGE_BUNDLE_LABEL_POSITION

Default value: ct

Aligns position, and supports Q.Position type, such as: Q.Position.CENTER_

EDGE_BUNDLE_LABEL_RADIUSFillet supports number type or includes objects of property x, y, such as {x: 10, y: 5}
EDGE_BUNDLE_LABEL_ROTATABLEWhether rotatable, boolean type
EDGE_BUNDLE_LABEL_ROTATERotate angle, number type, such as Math.PI/2

GROUP related styles

Operation effect

Style nameReference value
GROUP_BACKGROUND_COLOR

Default value is rgba(238,238,238,0.80).

The color can be set in the following format: #2898E0, rgba(22,33,240,0.5)

GROUP_BACKGROUND_GRADIENTGradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
GROUP_STROKE

Default value: 1

Edge thickness, number type

GROUP_STROKE_LINE_DASHDotted line style uses array format, such as [2, 5]
GROUP_STROKE_LINE_DASH_OFFSETOffset of dotted line, number type, dynamic modification of this property would realize the flow effect of dotted line
GROUP_STROKE_STYLE

Default value: #000

Edge style can be set in certain color, such as #2898E0

IMAGE related styles

Node image setting

Operation effect

Style nameReference value
IMAGE_ADJUST

Image adjustment mode, support two modes: flip and mirror

Q.Consts.IMAGE_ADJUST_FLIP

Q.Consts.IMAGE_ADJUST_MIRROR

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

IMAGE_ALPHAImage transparency, 0-1
IMAGE_BACKGROUND_COLORColor can be set in the following format: #2898E0, rgba(22,33,240,0.5)
IMAGE_BACKGROUND_GRADIENTGradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
IMAGE_BORDERBorder thickness and number type
IMAGE_BORDER_COLORColor can be set in the following format: #2898E0, rgba(22,33,240,0.5)
IMAGE_BORDER_LINE_DASHDotted line style uses array format, such as [2, 5]
IMAGE_BORDER_LINE_DASH_OFFSETOffset of dotted line, value type, dynamic modification of this property would realize the flow effect of dotted line
IMAGE_BORDER_RADIUSFillet supports value type or includes objects of property x, y, such as {x: 10, y: 5}
IMAGE_BORDER_STYLEBorder style can be set in certain color, such as #2898E0
IMAGE_PADDINGInternal gap supports value or Q.Inserts type, such as: new Q.Insets(10, 5)
IMAGE_RADIUSFillet supports value type or includes objects of property x, y, such as {x: 10, y: 5}

LABEL related styles

Operation effect

Style nameReference value
LABEL_ALIGN_POSITIONAligns position, and supports Q.Position type, such as: Q.Position.CENTER_TOP
LABEL_ANCHOR_POSITION

Default value: ct

Aligns position, and supports Q.Position type, such as: Q.Position.CENTER_TOP

LABEL_BACKGROUND_COLOR

Default value: null

Color can be set in the following format: #2898E0, rgba(22,33,240,0.5)

LABEL_BACKGROUND_GRADIENT

Default value: null

Gradient can apply with the example of Q.Gradient, such as: new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])

LABEL_BORDER

Default value: 0

Border thickness, value type

LABEL_BORDER_STYLE

Default value: #000

Border style can be set in certain color, such as #2898E0

LABEL_COLOR

Default value: #333

Color can be set in the following format: #2898E0, rgba(22,33,240,0.5)

LABEL_FONT_FAMILYFont family, such as helvetica arial
LABEL_FONT_SIZEFont size supports value, unit: pixel
LABEL_FONT_STYLEFont style, such as: lighter
LABEL_OFFSET_XOffset x, number type
LABEL_OFFSET_YOffset y, number type
LABEL_PADDING

Default value: new Q.Insets(0, 2)

Internal gap supports value or Q.Inserts type, such as: new Q.Insets(10, 5)

LABEL_POINTER

Default value: true

Bubble pointer, boolean type, true or false

LABEL_POINTER_WIDTH

Default value: 8

Bubble pointer width, number type

LABEL_POSITION

Default value: cb

Aligns position, and supports Q.Position type, such as: Q.Position.CENTER_TOP

LABEL_RADIUS

Default value: 8

Fillet supports value type or includes objects of property x, y, such as {x: 10, y: 5}

LABEL_ROTATABLE

Default value: true

whether it is rotatable, boolean type

LABEL_ROTATERotate angle, value type, such as Math.PI/2
LABEL_SIZESize supports value or contains objects of property width and height, such as {width: 100}
LABEL_SHADOW_BLUR

Shadow blur distance of text label 

LABEL_SHADOW_COLOR

Shadow color of text label 

LABEL_SHADOW_OFFSET_X

Shadow x offset of text label 

LABEL_SHADOW_OFFSET_Y

Shadow y offset of text label 

LAYOUT related styles

Refer to later examples of LINE related styles

Style nameReference value
LAYOUT_BY_PATHboolean,Whether is layouted by certain routines, or proper for ShapeNode and Edge, which react to the child component of element mounting

LINE related styles

Line top style(lineCap) - butt, round, square

Line inflection point style - lineJoin - miter, round, bevel

Line end points and inflection point styles of path

Operation effect

Style nameReference value
LINE_CAP

Line top style can be set to Q.Consts.LINE_CAP_* 

LINE_JOIN

Line inflection point style can be set to Q.Consts.LINE_JOIN_* 

PADDING related styles

Style nameReference value
PADDINGFor the internal gap of nodes, the gap effect can be seen at the set background or edge

RENDER related styles

 

Color dyeing, refer to online presentation

dyeing effect

Style nameReference value
RENDER_COLOR

Color can be set in the following format: #2898E0, rgba(22,33,240,0.5) 

RENDER_COLOR_BLEND_MODE

Default value: linear.burn 

SELECTION related styles

Example

Operation selection effect

Bad blur effect under shadow of chrome

Style nameReference value
SELECTION_BORDER

Default value: 1

Border thickness, number type

SELECTION_COLOR

Default value is rgba(0,34,255, 0.80).

The color can be set in the following format: #2898E0, rgba(22,33,240,0.5)

SELECTION_SHADOW_BLUR

Default value: 7 

SELECTION_SHADOW_OFFSET_X

Default value: 2

Selected shadow x offset

SELECTION_SHADOW_OFFSET_Y

Default value: 2

Selected shadow y offset

SHADOW related styles

Style nameReference value
SHADOW_BLURElement shadow blur distance
SHADOW_COLORElement shadow color
SHADOW_OFFSET_XElement shadow x offset
SHADOW_OFFSET_YElement shadow y offset

example

result

SHAPE related styles

Style nameReference value
SHAPE_FILL_COLORColor can be set in the following format: #2898E0, rgba(22,33,240,0.5)
SHAPE_FILL_GRADIENTGradient can use the example of Q.Gradient. For instance, new Gradient(Q.Consts.GRADIENT_TYPE_LINEAR, [Q.toColor(0x8AFFFFFF), Q.toColor(0x44CCCCCC)], [0.1, 0.9])
SHAPE_LINE_DASHDotted line style uses array format, such as [2, 5]
SHAPE_LINE_DASH_OFFSETOffset of dotted line, value type, dynamic modification of this property would realize the flow effect of dotted line
SHAPE_STROKEDefault value: 1 Edge thickness, value type
SHAPE_STROKE_STYLEEdge style can be set in certain color, such as #2898E0
SHAPE_OUTLINE

Default value: 0

Outer border width, value type, default to undefined

SHAPE_OUTLINE_STYLE

Outer border style can be set in certain color, such as #2898E0, default to undefined

  • No labels