设置基础样式

基础样式修改的其实是主题配置，所以会通过setThemeConfig方法设置。

设置背景

画布背景可以设置颜色或图片。

设置画布背景颜色

mindMap.setThemeConfig({
    backgroundColor: '#A4DD00'
})

设置背景图片

背景图片还支持设置三个属性：图片重复、图片位置、图片大小。其实就是css的background-repeat、background-position、background-size三个属性。

不过导出为图片的时候背景图片的行为和css并不完全一致，因为导出是通过canvas实现的，而canvas并不存在这三个属性，所以是通过有限模拟css这三个属性行为实现的，详情可以阅读文章如何在canvas中模拟css的背景图片样式。

mindMap.setThemeConfig({
    backgroundImage: 'xxx.png',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
})

backgroundRepeat支持设置的值如下：

[
  {
    name: '不重复',
    value: 'no-repeat'
  },
  {
    name: '重复',
    value: 'repeat'
  },
  {
    name: '水平方向重复',
    value: 'repeat-x'
  },
  {
    name: '垂直方向重复',
    value: 'repeat-y'
  }
]

backgroundPosition支持设置的值如下：

[
  {
    name: '默认',
    value: '0% 0%'
  },
  {
    name: '左上',
    value: 'left top'
  },
  {
    name: '左中',
    value: 'left center'
  },
  {
    name: '左下',
    value: 'left bottom'
  },
  {
    name: '右上',
    value: 'right top'
  },
  {
    name: '右中',
    value: 'right center'
  },
  {
    name: '右下',
    value: 'right bottom'
  },
  {
    name: '中上',
    value: 'center top'
  },
  {
    name: '居中',
    value: 'center center'
  },
  {
    name: '中下',
    value: 'center bottom'
  }
]

backgroundSize支持设置的值如下：

[
  {
    name: '自动',
    value: 'auto'
  },
  {
    name: '覆盖',
    value: 'cover'
  },
  {
    name: '保持',
    value: 'contain'
  }
]

设置连线样式

设置节点间的连线样式，支持：颜色、粗细、虚线、风格。

目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在logicalStructure逻辑结构图和mindMap思维导图两种结构时生效。

mindMap.setThemeConfig({
    lineColor: '#009CE0',
    lineWidth: 3,
    lineDasharray: '15, 10, 5, 10, 15',
    lineStyle: 'curve'
})

设置概要的连线样式

概要节点前面会有一条弧线，它的颜色和粗细可以修改。

mindMap.setThemeConfig({
    generalizationLineColor: '#FA28FF',
    generalizationLineWidth: 4
})

设置关联线的样式

关联线需要使用关联线插件

关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。

mindMap.setThemeConfig({
    associativeLineColor: '#FA28FF',
    associativeLineWidth: 4,
    associativeLineActiveColor: '#9F0500',
    associativeLineActiveWidth: 6
})

设置节点边框风格

默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。

mindMap.setThemeConfig({
    nodeUseLineStyle: true
})

设置节点内边距

mindMap.setThemeConfig({
    paddingX: 30,
    paddingY: 20
})

设置节点内的图片最大的显示宽高

mindMap.setThemeConfig({
    imgMaxWidth: 100,
    imgMaxHeight: 50
})

设置节点内图标的显示大小

mindMap.setThemeConfig({
    iconSize: 30,
})

设置节点外边距

设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。

mindMap.setThemeConfig({
    // 二级节点样式
    second: {
        marginX: 30,
        marginY: 20
    },
    // 三级及以下节点样式
    node: {
        marginX: 40,
        marginY: 30
    }
})

设置基础样式 ​

设置背景 ​

设置画布背景颜色 ​

设置背景图片 ​

设置连线样式 ​

设置概要的连线样式 ​

设置关联线的样式 ​

设置节点边框风格 ​

设置节点内边距 ​

设置节点内的图片最大的显示宽高 ​

设置节点内图标的显示大小 ​

设置节点外边距 ​

完整示例 ​