feat:新增节点线性渐变配置

liuyonghua-cww · Sep 7, 2021 · 27e8f55 · 27e8f55
1 parent 94dafaa
commit 27e8f55
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 66 deletions.
diff --git a/learn-x6/public/index.html b/learn-x6/public/index.html
@@ -5,7 +5,7 @@
     <meta content="IE=edge" http-equiv="X-UA-Compatible">
     <meta content="width=device-width,initial-scale=1.0" name="viewport">
     <link href="<%= BASE_URL %>favicon.ico" rel="icon">
-    <link href="//at.alicdn.com/t/font_2731098_g9zgd41uqvq.css" rel="stylesheet">
+    <link href="//at.alicdn.com/t/font_2731098_rh6z2ud8xd7.css" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
         * {

diff --git a/learn-x6/src/components/Header/ToolsBar/CellAttr/FillColor/index.vue b/learn-x6/src/components/Header/ToolsBar/CellAttr/FillColor/index.vue
@@ -1,81 +1,58 @@
 <template>
     <div class="fill-color">
-        <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
+        <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
             <a-form-item label="填充样式">
                 <a-select v-model="type" @change="onChange">
                     <a-select-option
-                        v-for="(item, i) of fillType"
-                        :value="item.value"
+                            v-for="(item, i) of fillType"
+                            :value="item.value"
                     >
                         {{ item.label }}
                     </a-select-option>
                 </a-select>
             </a-form-item>
-
-           <template v-if="type === 'linearGradient'">
-               <a-form-item label="开始颜色">
-                   <a-input
-                       type="color"
-                       v-model="stops[0].color"
-                       @change="onChange"
-                   />
-               </a-form-item>
-               <a-form-item label="结束颜色">
-                   <a-input
-                       type="color"
-                       v-model="stops[1].color"
-                       @change="onChange"
-                   />
-               </a-form-item>
-               <a-form-item label="起点">
+            <template v-if="type === 'linearGradient'">
+                <a-form-item label="渐变方向">
+                    <a-select v-model="direction" @change="changeDirection">
+                        <a-select-option
+                                v-for="(item, i) of linearGradientDirection"
+                                :value="item.value"
+                        >
+                            {{ item.label }}
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+            </template>
+            <template v-if="type === 'linearGradient' || type === 'radialGradient'">
+               <div class="color-range">
                    <a-input
-                       type="number"
-                       v-model="attrs.x1"
-                       :step="0.1"
-                       :min="0"
-                       :max="1"
-                       @change="onChange"
+                           v-model="stops[0].color"
+                           type="color"
+                           @change="onChange"
                    />
+                   <a-button @click="exchangeColor">
+                       <i class="iconfont icon-icon_exchange"></i>
+                   </a-button>
                    <a-input
-                       type="number"
-                       v-model="attrs.y1"
-                       :step="0.1"
-                       :min="0"
-                       :max="1"
-                       @change="onChange"
+                           v-model="stops[1].color"
+                           type="color"
+                           @change="onChange"
                    />
-               </a-form-item>
-               <a-form-item label="终点">
-                   <a-input
-                       type="number"
-                       v-model="attrs.x2"
-                       :step="0.1"
-                       :min="0"
-                       :max="1"
-                       @change="onChange"
-                   />
-                   <a-input
-                       type="number"
-                       v-model="attrs.y2"
-                       :step="0.1"
-                       :min="0"
-                       :max="1"
-                       @change="onChange"
-                   />
-               </a-form-item>
-           </template>
+               </div>
+            </template>
+
         </a-form>
         <sketch
-            v-if="type === 'solidColor'"
-            :value="solidColor"
-            @input="transferColor($event.hex)"
+                v-if="type === 'solidColor'"
+                :value="solidColor"
+                @input="transferColor($event.hex)"
         />
     </div>
 </template>
 
 <script>
 import Sketch from 'vue-color/src/components/Sketch';
-import {isObject, isString} from "@/utils/types";
+import { isObject, isString } from "@/utils/types";
 
 export default {
     name: "index",
@@ -92,30 +69,56 @@ export default {
         solidColor() {
             return {
                 hex: this.fill || '#ffffff'
-            }
+            };
         },
     },
     data() {
         return {
-            fillType: [{label: '纯色背景', value: 'solidColor'}, {label: '线性渐变', value: 'linearGradient'}],
+            fillType: [ { label: '纯色背景', value: 'solidColor' }, { label: '线性渐变', value: 'linearGradient' } ],
             type: null,
             stops: [
                 { offset: '0%', color: '#b1d8ff' },
                 { offset: '100%', color: '#759cc3' },
             ],
+            // 定义几个渐变的方向
+            linearGradientDirection: [
+                { label: '上', value: 'top' },
+                { label: '下', value: 'bottom' },
+                { label: '左', value: 'left' },
+                { label: '右', value: 'right' },
+                { label: '左上', value: 'leftTop' },
+                { label: '左下', value: 'leftBottom' },
+                { label: '右上', value: 'rightTop' },
+                { label: '右下', value: 'rightBottom' },
+            ],
+            direction: 'bottom',
+            // 不同方向上的值
+            linearGradientDirectionValue: {
+                top: { x1: '0', y1: '1', x2: '0', y2: '0' },
+                bottom: { x1: '0', y1: '0', x2: '0', y2: '1' },
+                left: { x1: '1', y1: '0', x2: '0', y2: '0' },
+                right: { x1: '0', y1: '0', x2: '1', y2: '0' },
+                leftTop: { x1: '1', y1: '1', x2: '0', y2: '0' },
+                leftBottom: { x1: '1', y1: '0', x2: '0', y2: '1' },
+                rightTop: { x1: '0', y1: '1', x2: '1', y2: '0' },
+                rightBottom: { x1: '0', y1: '0', x2: '1', y2: '1' }
+            },
             attrs: { x1: '0', y1: '0', x2: '0', y2: '1' },
-        }
+        };
     },
     created() {
         this.getFill();
+        this.getDirection();
     },
     methods: {
         transferColor(v) {
-            this.$emit('setFillColor', v)
+            // 触发父组件的自定义事件并将值传给父组件
+            this.$emit('setFillColor', v);
         },
+        // 获取渐变的类型
         getFill() {
             if (isString(this.fill)) {
-                this.type = 'solidColor'
+                this.type = 'solidColor';
             }
             if (isObject(this.fill) && this.fill.type === 'linearGradient') {
                 this.type = 'linearGradient';
@@ -134,19 +137,45 @@ export default {
                     attrs: this.attrs,
                 });
             }
+        },
+        getDirection() {
+            for (const key in this.linearGradientDirectionValue) {
+                if (Object.values(this.linearGradientDirectionValue[key]).join('') === Object.values(this.attrs).join('')) {
+                    this.direction = key;
+                }
+            }
+        },
+        changeDirection() {
+            this.attrs = this.linearGradientDirectionValue[this.direction];
+            this.onChange();
+        },
+        // 交换起点、终点的颜色
+        exchangeColor() {
+            const {color: color1} = this.stops[0];
+            const {color: color2} = this.stops[1];
+            this.stops[0].color = color2;
+            this.stops[1].color = color1;
+            this.onChange();
         }
     }
-}
+};
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 .fill-color {
     width: 240px;
     padding: 10px;
 
     .ant-form-item {
         margin-bottom: 0;
     }
+    .color-range {
+        display: flex;
+        justify-content: space-between;
+        input {
+            width: 30%;
+        }
+    }
 }
 
 </style>
diff --git a/learn-x6/src/components/Stencil/index.vue b/learn-x6/src/components/Stencil/index.vue
@@ -447,8 +447,8 @@ export default {
                     graphHeight: 300
                 })
             }
-            this.initStencil();
-            this.initShape();
+            this.initStencil(); // 重新初始化拖拽区
+            this.initShape(); // 重新生成相关基础图形
             for (const group of Object.keys(shapes)) {
                 const arr = []
                 shapes[group].forEach(shape => {