mindMap.associativeLine.createLineFromActiveNode()
然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
-本节将介绍如何更新当前激活节点的样式。
+样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是setStyle方法，通过第三个参数进行指定：
// 设置常态样式
+node.setStyle('样式属性', '样式值')
+
+// 设置激活样式
+node.setStyle('样式属性', '样式值', true)
+文字样式目前支持：字体、字号、行高、颜色、加粗、斜体、划线。
这些样式选择的UI界面都需要你自行开发，然后调用节点的setStyle方法更新。
同样首先需要监听节点的激活事件来换取当前激活的节点：
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+ activeNodes.value = activeNodeList
+})
+// 设置字体
+activeNodes.value.forEach(node => {
+ node.setStyle('fontFamily', '宋体, SimSun, Songti SC')
+})
+
+// 设置字号
+activeNodes.value.forEach(node => {
+ node.setStyle('fontSize', 16)
+})
+
+// 设置行高
+activeNodes.value.forEach(node => {
+ node.setStyle('lineHeight', 1.5)
+})
+
+// 设置颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('color', '#fff')
+})
+
+// 设置加粗
+activeNodes.value.forEach(node => {
+ node.setStyle('fontWeight', 'bold')// node.setStyle('fontWeight', 'normal')
+})
+
+// 设置划线
+activeNodes.value.forEach(node => {
+ // 下划线
+ node.setStyle('textDecoration', 'underline')
+ // 删除线
+ node.setStyle('textDecoration', 'line-through')
+ // 上划线
+ node.setStyle('textDecoration', 'overline')
+})
+边框样式支持设置：颜色、虚线、线宽、圆角。
设置边框样式前请先检查线宽是否被设置成了0。
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('borderColor', '#000')
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('borderDasharray', '5,5')// node.setStyle('borderDasharray', 'none')
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('borderWidth', 2)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+ node.setStyle('borderRadius', 5)
+})
+背景样式也就是背景颜色。
+activeNodes.value.forEach(node => {
+ node.setStyle('fillColor', '#fff')
+})
+目前支持以下形状：
+[
+ {
+ name: '矩形',
+ value: 'rectangle'
+ },
+ {
+ name: '菱形',
+ value: 'diamond'
+ },
+ {
+ name: '平行四边形',
+ value: 'parallelogram'
+ },
+ {
+ name: '圆角矩形',
+ value: 'roundedRectangle'
+ },
+ {
+ name: '八角矩形',
+ value: 'octagonalRectangle'
+ },
+ {
+ name: '外三角矩形',
+ value: 'outerTriangularRectangle'
+ },
+ {
+ name: '内三角矩形',
+ value: 'innerTriangularRectangle'
+ },
+ {
+ name: '椭圆',
+ value: 'ellipse'
+ },
+ {
+ name: '圆',
+ value: 'circle'
+ }
+]
+设置形状前请先确认边框宽度是否被设置成了0。
+activeNodes.value.forEach(node => {
+ node.setStyle('shape', 'circle')
+})
+节点线条支持设置：颜色、虚线、线宽。
// 设置线条颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('lineColor', '#000')
+})
+
+// 设置线条虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('lineDasharray', '5, 5, 1, 5')// node.setStyle('lineDasharray', 'none')
+})
+
+// 设置线条宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('lineWidth', 3)
+})
+节点内边距支持设置水平和垂直方向的内边距。
+activeNodes.value.forEach(node => {
+ node.setStyle('paddingX', 50)
+ node.setStyle('paddingY', 50)
+})
+激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
+
+const checkIsSupportActive = (prop) => {
+ return supportActiveStyle.includes(prop)
+}
+其他和数值常态样式是一样的，只需要给setStyle方法传入第三个参数：
// 设置边框颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('borderColor', '#000', true)
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('borderDasharray', '5,5', true)// node.setStyle('borderDasharray', 'none', true)
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('borderWidth', 2, true)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+ node.setStyle('borderRadius', 5, true)
+})
+
+// 设置背景颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('fillColor', '#fff', true)
+})
+基础样式修改的其实是主题配置，所以会通过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
+ }
+})
+