节点背景渐变色实现

simple-mind-map/src/core/render/node/Node.js

@@ -1,6 +1,6 @@
 import Style from './Style'
 import Shape from './Shape'
-import { G, ForeignObject, Rect } from '@svgdotjs/svg.js'
+import { G, ForeignObject, Rect, Defs } from '@svgdotjs/svg.js'
 import nodeGeneralizationMethods from './nodeGeneralization'
 import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
@@ -63,6 +63,8 @@ class Node {
     this.userList = []
     // 节点内容的容器
     this.group = null
+    this.defsNode = null // 节点静态元素
+    this.gradientNode = null // 节点渐变背景
     this.shapeNode = null // 节点形状节点
     this.hoverNode = null // 节点hover和激活的节点
     // 节点内容对象
@@ -289,11 +291,17 @@ class Node {
     let { paddingY } = this.getPaddingVale()
     const halfBorderWidth = this.getBorderWidth() / 2
     paddingY += this.shapePadding.paddingY + halfBorderWidth
+    // 节点静态元素
+    this.defsNode = new Defs()
+    // 节点渐变背景
+    this.gradientNode = this.style.createGradient()
+    this.defsNode.add(this.gradientNode)
+    this.group.add(this.defsNode)
     // 节点形状
     this.shapeNode = this.shapeInstance.createShape()
     this.shapeNode.addClass('smm-node-shape')
     this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
-    this.style.shape(this.shapeNode)
+    this.style.shape(this.shapeNode, this.gradientNode.id())
     this.group.add(this.shapeNode)
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
     this.renderExpandBtnPlaceholderRect()

simple-mind-map/src/core/render/node/Style.js

@@ -2,6 +2,7 @@ import {
   checkIsNodeStyleDataKey,
   generateColorByContent
 } from '../../../utils/index'
+import { Gradient } from '@svgdotjs/svg.js'
 
 const rootProp = ['paddingX', 'paddingY']
 const backgroundStyleProps = [
@@ -86,6 +87,14 @@ class Style {
     return this.merge(prop, root)
   }
 
+  createGradient() {
+    let gradient = new Gradient("linear")
+    gradient.id()
+    gradient.stop(0,this.merge('startColor'))
+    gradient.stop(1, this.merge('endColor'))
+    return gradient
+  }
+
   //  获取自身自定义样式
   getSelfStyle(prop) {
     return this.ctx.getData(prop)
@@ -98,10 +107,18 @@ class Style {
   }
 
   //   矩形外的其他形状
-  shape(node) {
-    node.fill({
-      color: this.merge('fillColor')
-    })
+  shape(node, uid) {
+    if (this.merge('gradientStyle')) {
+      node.fill('url(#' + uid + ')'
+      )
+    } else {
+      node.fill({
+        color: this.merge('fillColor')
+      })
+    }
+    // node.fill({
+    //   color: this.merge('fillColor')
+    // })
     // 节点使用横线样式，不需要渲染非激活状态的边框样式
     // if (
     //   !this.ctx.isRoot &&

simple-mind-map/src/themes/default.js

@@ -70,7 +70,10 @@ export default {
     borderWidth: 0,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: true,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 二级节点样式
   second: {
@@ -88,7 +91,10 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 三级及以下节点样式
   node: {
@@ -106,7 +112,10 @@ export default {
     borderWidth: 0,
     borderRadius: 5,
     borderDasharray: 'none',
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   },
   // 概要节点样式
   generalization: {
@@ -124,7 +133,10 @@ export default {
     borderWidth: 1,
     borderDasharray: 'none',
     borderRadius: 5,
-    textDecoration: 'none'
+    textDecoration: 'none',
+    gradientStyle: false,
+    startColor: '#549688',
+    endColor: '#fff',
   }
 }