# 主题 Theme 样式

LogicFlow 提供了设置主题的方法，便于用户统一设置其内部所有元素的样式。
设置方式有两种：

初始化LogicFlow时作为配置传入
初始化后，调用LogicFlow的 setTheme 方法

# 配置

new LogicFlow时作为将主题配置作为参数进行初始化。

// 方法1：new LogicFlow时作为配置传入
const config = {
  domId: 'app',
  width: 1000,
  height: 800,
  style: { // 设置默认主题样式
    rect: { // 矩形样式
      width: 100,
      height: 50,
      radius: 6,
      fill: '#34415b',
      strokeWidth: 0
      ...
    },
    circle: { // 圆形样式
      r: 40,
      fill: '#34415b',
      strokeWidth: 0
      ...
    },
    nodeText: { // 节点文本样式
      fontSize: 16,
      color: '#ffffff'
    },
    edgeText: { // 边文本样式
      fontSize: 16,
      color: '#ffffff'
    },
    anchor: { // 锚点样式
      fill: "#6edd97"
    }
    ...
  }
}
const lf = new LogicFlow(config);

# setTheme

调用LogicFlow的setTheme方法，lf.setTheme进行主题配置

// 方法2： 调用LogicFlow的setTheme方法 
lf.setTheme({
   rect: {
      width: 100,
      height: 50,
      radius: 6,
      fill: '#34415b',
      strokeWidth: 0
      ...
    },
    circle: {
      r: 40,
      fill: '#34415b',
      strokeWidth: 0
      ...
    },
    nodeText: {
      fontSize: 16,
      color: '#ffffff'
    },
    edgeText: {
      fontSize: 16,
      color: '#ffffff'
    },
    anchor: {
      fill: "#6edd97"
    }
    ...
})

style 中填写需要覆盖的值，未填写的将会使用默认值，主题配置需要在数据render之前进行。

各个图形支持的属性和默认值在下方样式介绍中有详细讲解。

# 矩形

key	type	description	default
width	number	宽度	100
height	number	高度	80
radius	number	圆角弧度	0
fill	color	填充颜色	#FFFFFF
fillOpacity	number	填充透明度	1
stroke	color	边框颜色	#000000
strokeWidth	number	边框宽度	2
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1
outlineColor	color	外边框颜色	#000000
hoverOutlineColor	color	hover外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'
hoverOutlineStrokeDashArray	string	控制用来描hover外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看矩形样式设置

lf.setTheme({
  rect: {
    width: 100,
    height: 80,
    radius: 0,
    fill: '#FFFFFF',
    stroke: '#000000',
    strokeWidth: 2,
    fillOpacity: 1,
    strokeOpacity: 1,
    opacity: 1,
    outlineColor: '#000000',
    hoverOutlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
    hoverOutlineStrokeDashArray: '3,3'
  },
})

# 圆形

key	type	description	default
r	number	半径	50
fill	color	填充颜色	#FFFFFF
fillOpacity	number	填充透明度	1
stroke	color	边框颜色	#000000
strokeWidth	number	边框宽度	2
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1
outlineColor	color	外边框颜色	#000000
hoverOutlineColor	color	hover外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'
hoverOutlineStrokeDashArray	string	控制用来描hover外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看圆形样式设置

lf.setTheme({
  circle: {
    r: 50,
    fill: '#FFFFFF',
    stroke: '#000000',
    strokeWidth: 2,
    fillOpacity: 1,
    strokeOpacity: 1,
    opacity: 1,
    outlineColor: '#000000',
    hoverOutlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
    hoverOutlineStrokeDashArray: '3,3'
  },
})

# 椭圆

key	type	description	default
rx	number	x轴尺寸	55
ry	number	y轴尺寸	45
fill	color	填充颜色	#FFFFFF
fillOpacity	number	填充透明度	1
stroke	color	边框颜色	#000000
strokeWidth	number	边框宽度	2
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1
outlineColor	color	外边框颜色	#000000
hoverOutlineColor	color	hover外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'
hoverOutlineStrokeDashArray	string	控制用来描hover外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看椭圆样式设置

lf.setTheme({
  ellipse: {
    rx: 50,
    ry: 50,
    fill: '#FFFFFF',
    stroke: '#000000',
    strokeWidth: 2,
    fillOpacity: 1,
    strokeOpacity: 1,
    opacity: 1,
    outlineColor: '#000000',
    hoverOutlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
    hoverOutlineStrokeDashArray: '3,3'
  },
})

# 文本

key	type	description	default
color	color	字体颜色	#000000
fontSize	number	字体大小	1
fontWeight	string/number	字体粗细	normal
fontFamily	string	字体名称	''

点击展开查看文本样式设置

lf.setTheme({
  text: {
    color: '#000000',
    fontSize: 12,
    fontWeight: 'normal',
    fontFamily: '',
  },
})

# 节点文本

key	type	description	default
color	color	字体颜色	#000000
fontSize	number	字体大小	1
fontWeight	string/number	字体粗细	normal
fontFamily	string	字体名称	''
dx	number	水平偏移量	None
dy	number	垂直偏移量	None
textAnchor	string	对齐方式	inherit
rotate	number	文字旋转角度	0
textLength	number	文本长度	None
lengthAdjust	string	文本伸缩方式	'spacing'

点击展开查看节点文本样式设置

lf.setTheme({
  nodeText: {
    color: '#000000',
    fontSize: 12,
    fontWeight: 'normal',
    fontFamily: '',
  },
})

# 菱形

key	type	description	default
rx	number	x轴尺寸	50
ry	number	y轴尺寸	50
fill	color	填充颜色	#FFFFFF
fillOpacity	number	填充透明度	1
stroke	color	边框颜色	#000000
strokeWidth	number	边框宽度	2
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1
outlineColor	color	外边框颜色	#000000
hoverOutlineColor	color	hover外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'
hoverOutlineStrokeDashArray	string	控制用来描hover外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看多边形样式设置

lf.setTheme({
  diamond: {
    rx: 50,
    ry: 50,
    fill: '#FFFFFF',
    stroke: '#000000',
    strokeWidth: 2,
    fillOpacity: 1,
    strokeOpacity: 1,
    opacity: 1,
    outlineColor: '#000000',
    hoverOutlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
    hoverOutlineStrokeDashArray: '3,3'
  },
})

# 多边形

key	type	description	default
fill	color	填充颜色	#FFFFFF
fillOpacity	number	填充透明度	1
stroke	color	边框颜色	#000000
strokeWidth	number	边框宽度	2
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1
outlineColor	color	外边框颜色	#000000
hoverOutlineColor	color	hover外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'
hoverOutlineStrokeDashArray	string	控制用来描hover外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看多边形样式设置

lf.setTheme({
  polygon: {
    fill: '#FFFFFF',
    stroke: '#000000',
    strokeWidth: 2,
    fillOpacity: 1,
    strokeOpacity: 1,
    opacity: 1,
    outlineColor: '#000000',
    hoverOutlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
    hoverOutlineStrokeDashArray: '3,3'
  },
})

# 锚点

key	type	description	default
r	number	半径	4
fill	color	填充颜色	#FFFFFF
fillOpacity	number	填充透明度	1
stroke	color	边框颜色	#000000
strokeWidth	number	边框宽度	1
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1
outlineColor	color	外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看锚点样式设置

lf.setTheme({
  anchor: {
    fill: '#FFFFFF',
    stroke: '#000000',
    strokeWidth: 2,
    fillOpacity: 1,
    strokeOpacity: 1,
    opacity: 1,
    outlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
  },
})

# 锚点hover

key	type	description	default
r	number	半径	10
fill	color	填充颜色	#1E90FF
fillOpacity	number	填充透明度	0.5
stroke	color	边框颜色	#4169E1
strokeWidth	number	边框宽度	1
strokeOpacity	number	边框透明度	1
opacity	number	整体透明度	1

点击展开查看锚点hover样式设置

lf.setTheme({
  anchorHover: {
    r: 10, 
    fill: '#1E90FF',
    fillOpacity: 0.5,
    stroke: '#4169E1',
    strokeWidth: 1,
    strokeOpacity: 1,
    opacity: 1,
  },
})

# 锚点连线

key	type	description	default
stroke	color	连线颜色	#000000
strokeWidth	number	连线宽度	2
strokeDasharray	string	图案范式	'3,2'

点击展开查看锚点连线样式设置

lf.setTheme({
  anchorLine: {
    stroke: '#000000',
    strokeWidth: 2,
    strokeDasharray: '3,2',
  },
})

# 直线

key	type	description	default
stroke	color	连线颜色	#000000
strokeWidth	number	连线宽度	2
strokeDashArray	string	控制连线的点划线的图案范式, 设置为空是为实线	'1,0'
hoverStroke	color	连线hover颜色	#000000
selectedStroke	color	连线选中颜色	#000000
outlineColor	color	外边框颜色	#000000
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看直线样式设置

lf.setTheme({
  line: {
    stroke: '#000000',
    strokeWidth: 2,
    strokeDashArray: '1,0',
    hoverStroke: '#000000',
    selectedStroke: '#000000',
    selectedShadow: true,
    outlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
  },
})

# 折线

key	type	description	default
stroke	color	连线颜色	#000000
strokeWidth	number	连线宽度	2
strokeDashArray	string	控制连线的点划线的图案范式, 设置为空是为实线	'1,0'
hoverStroke	color	连线hover颜色	#000000
selectedStroke	color	连线选中颜色	#000000
outlineColor	color	外边框颜色	#000000
offset	number	折线起终点距离节点的偏移	30
outlineStrokeDashArray	string	控制用来描外边框的点划线的图案范式, 设置为空是为实线	'3,3'

点击展开查看折线样式设置

lf.setTheme({
  polyline: {
    stroke: '#000000',
    strokeWidth: 2,
    strokeDashArray: '1,0',
    hoverStroke: '#000000',
    selectedStroke: '#000000',
    selectedShadow: true,
    offset: 30,
    outlineColor: '#000000',
    outlineStrokeDashArray: '3,3',
  },
})

# 连线文本

key	type	description	default
color	color	字体颜色	#000000
fontSize	number	字体大小	1
fontWeight	string/number	字体粗细	normal
fontFamily	string	字体名称	''
background	BackgroundObject	文本背景(矩形)	BackgroundObject
hoverBackground	BackgroundObject	文本背景(矩形)	null
dx	number	水平偏移量	None
dy	number	垂直偏移量	None
textAnchor	string	对齐方式	inherit
rotate	number	文字旋转角度	0
textLength	number	文本长度	None
lengthAdjust	string	文本拉伸或压缩方式	'spacing'

# `BackgroundObject`

key	type	description	default
fill	color	填充颜色	transparent
height	number	高度	20
stroke	number	边框颜色	transparent
radius	number	圆角弧度	0

点击展开查看连线文本样式设置

lf.setTheme({
  edgeText: {
    color: '#000000',
    fontSize: 12,
    fontWeight: 'normal',
    fontFamily: '',
    background: {
      fill: 'transparent',
      height: 20,
      stroke: 'transparent',
      radius: 0,
    },
    hoverBackground: {
      fill: 'transparent',
      height: 20,
      stroke: 'transparent',
      radius: 0,
    },
  },
})

# 箭头

key	type	description	default
offset	number	箭头长度	10
verticalLength	number	箭头垂直于连线的距离	5

点击展开查看箭头样式设置

lf.setTheme({
  arrow: {
    offset: 10, // 箭头长度
    verticalLength: 5, // 箭头垂直于连线的距离
  },
})

# 对齐线

key	type	description	default
stroke	color	对齐线颜色	#1E90FF
strokeWidth	number	对齐线宽度	1

点击展开查看对齐线样式设置

lf.setTheme({
  snapline: {
    stroke: '#1E90FF', // 对齐线颜色
    strokeWidth: 1, // 对齐线宽度
  },
})

← 静默模式事件 Event →