Demo：支持设置节点背景渐变方向

web/src/config/en.js

@@ -557,3 +557,55 @@ export const numberLevelList = [
     value: 0
   }
 ]
+
+// 背景渐变方向
+export const linearGradientDirList = [
+  {
+    name: 'Left to right',
+    value: '1',
+    start: [0, 0],
+    end: [1, 0]
+  },
+  {
+    name: 'Right to left',
+    value: '2',
+    start: [1, 0],
+    end: [0, 0]
+  },
+  {
+    name: 'Top to bottom',
+    value: '3',
+    start: [0, 0],
+    end: [0, 1]
+  },
+  {
+    name: 'Bottom to top',
+    value: '4',
+    start: [0, 1],
+    end: [0, 0]
+  },
+  {
+    name: 'Left top to right bottom',
+    value: '5',
+    start: [0, 0],
+    end: [1, 1]
+  },
+  {
+    name: 'Left bottom to right top',
+    value: '6',
+    start: [0, 1],
+    end: [1, 0]
+  },
+  {
+    name: 'Right top to left bottom',
+    value: '7',
+    start: [1, 0],
+    end: [0, 1]
+  },
+  {
+    name: 'Right bottom to left top',
+    value: '8',
+    start: [1, 1],
+    end: [0, 0]
+  }
+]

web/src/config/index.js

@@ -21,7 +21,8 @@ import {
   shapeListMap as shapeListMapZh,
   lineStyleMap as lineStyleMapZh,
   numberTypeList as numberTypeListZh,
-  numberLevelList as numberLevelListZh
+  numberLevelList as numberLevelListZh,
+  linearGradientDirList as linearGradientDirListZh
 } from './zh'
 import {
   fontFamilyList as fontFamilyListEn,
@@ -36,7 +37,8 @@ import {
   backgroundSizeList as backgroundSizeListEn,
   downTypeList as downTypeListEn,
   numberTypeList as numberTypeListEn,
-  numberLevelList as numberLevelListEn
+  numberLevelList as numberLevelListEn,
+  linearGradientDirList as linearGradientDirListEn
 } from './en'
 
 const fontFamilyList = {
@@ -114,6 +116,11 @@ const numberLevelList = {
   en: numberLevelListEn
 }
 
+const linearGradientDirList = {
+  zh: linearGradientDirListZh,
+  en: linearGradientDirListEn
+}
+
 export {
   fontSizeList,
   lineHeightList,
@@ -137,5 +144,6 @@ export {
   sidebarTriggerList,
   downTypeList,
   numberTypeList,
-  numberLevelList
+  numberLevelList,
+  linearGradientDirList
 }

web/src/config/zh.js

@@ -651,3 +651,55 @@ export const numberLevelList = [
     value: 0
   }
 ]
+
+// 背景渐变方向
+export const linearGradientDirList = [
+  {
+    name: '从左到右',
+    value: '1',
+    start: [0, 0],
+    end: [1, 0]
+  },
+  {
+    name: '从右到左',
+    value: '2',
+    start: [1, 0],
+    end: [0, 0]
+  },
+  {
+    name: '从上到下',
+    value: '3',
+    start: [0, 0],
+    end: [0, 1]
+  },
+  {
+    name: '从下到上',
+    value: '4',
+    start: [0, 1],
+    end: [0, 0]
+  },
+  {
+    name: '从左上到右下',
+    value: '5',
+    start: [0, 0],
+    end: [1, 1]
+  },
+  {
+    name: '从左下到右上',
+    value: '6',
+    start: [0, 1],
+    end: [1, 0]
+  },
+  {
+    name: '从右上到左下',
+    value: '7',
+    start: [1, 0],
+    end: [0, 1]
+  },
+  {
+    name: '从右下到左上',
+    value: '8',
+    start: [1, 1],
+    end: [0, 0]
+  }
+]

web/src/lang/en_us.js

@@ -238,7 +238,8 @@ export default {
     endColor: 'End',
     arrowDir: 'Arrow dir',
     arrowDirStart: 'Start',
-    arrowDirEnd: 'End'
+    arrowDirEnd: 'End',
+    direction: 'Direction'
   },
   theme: {
     title: 'Theme',

web/src/lang/zh_cn.js

@@ -236,7 +236,8 @@ export default {
     endColor: '结束',
     arrowDir: '箭头位置',
     arrowDirStart: '头部',
-    arrowDirEnd: '尾部'
+    arrowDirEnd: '尾部',
+    direction: '方向'
   },
   theme: {
     title: '主题',

web/src/pages/Edit/components/Style.vue

@@ -247,16 +247,16 @@
             <el-popover ref="popover4" placement="bottom" trigger="hover">
               <Color :color="style.fillColor" @change="changeFillColor"></Color>
             </el-popover>
-          </div>
-        </div>
-        <div class="row">
-          <div class="rowItem">
-            <span class="name">{{ $t('style.gradientStyle') }}</span>
+            <span class="name" style="margin-left: 20px;">{{
+              $t('style.gradientStyle')
+            }}</span>
             <el-checkbox
               v-model="style.gradientStyle"
               @change="update('gradientStyle')"
             ></el-checkbox>
           </div>
+        </div>
+        <div class="row" v-if="style.gradientStyle">
           <div class="rowItem">
             <span class="name">{{ $t('style.startColor') }}</span>
             <span
@@ -282,6 +282,24 @@
               <Color :color="style.endColor" @change="changeEndColor"></Color>
             </el-popover>
           </div>
+          <div class="rowItem">
+            <span class="name">{{ $t('style.direction') }}</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.linearGradientDir"
+              placeholder=""
+              @change="update('linearGradientDir')"
+            >
+              <el-option
+                v-for="item in linearGradientDirList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
         </div>
         <!-- 形状 -->
         <div class="title">{{ $t('style.shape') }}</div>
@@ -458,7 +476,8 @@ import {
   borderRadiusList,
   lineHeightList,
   shapeList,
-  shapeListMap
+  shapeListMap,
+  linearGradientDirList
 } from '@/config'
 import { mapState } from 'vuex'
 
@@ -502,7 +521,8 @@ export default {
         lineMarkerDir: '',
         gradientStyle: false,
         startColor: '',
-        endColor: ''
+        endColor: '',
+        linearGradientDir: ''
       }
     }
   },
@@ -522,6 +542,11 @@ export default {
     },
     shapeListMap() {
       return shapeListMap[this.$i18n.locale] || shapeListMap.zh
+    },
+    linearGradientDirList() {
+      return (
+        linearGradientDirList[this.$i18n.locale] || linearGradientDirList.zh
+      )
     }
   },
   watch: {
@@ -587,6 +612,24 @@ export default {
       ].forEach(item => {
         this.style[item] = this.activeNodes[0].getStyle(item, false)
       })
+      this.initLinearGradientDir()
+    },
+
+    // 初始化渐变方向样式
+    initLinearGradientDir() {
+      const startDir = this.activeNodes[0].getStyle('startDir', false)
+      const endDir = this.activeNodes[0].getStyle('endDir', false)
+      const target = this.linearGradientDirList.find(item => {
+        return (
+          item.start[0] === startDir[0] &&
+          item.start[1] === startDir[1] &&
+          item.end[0] === endDir[0] &&
+          item.end[1] === endDir[1]
+        )
+      })
+      if (target) {
+        this.style.linearGradientDir = target.value
+      }
     },
 
     /**
@@ -595,9 +638,21 @@ export default {
      * @Desc: 修改样式
      */
     update(prop) {
-      this.activeNodes.forEach(node => {
-        node.setStyle(prop, this.style[prop])
-      })
+      if (prop === 'linearGradientDir') {
+        const target = this.linearGradientDirList.find(item => {
+          return item.value === this.style.linearGradientDir
+        })
+        this.activeNodes.forEach(node => {
+          node.setStyles({
+            startDir: [...target.start],
+            endDir: [...target.end]
+          })
+        })
+      } else {
+        this.activeNodes.forEach(node => {
+          node.setStyle(prop, this.style[prop])
+        })
+      }
     },
 
     /**