From 9099c834ff40ba1f64411dbb8b5a73d17ab2c806 Mon Sep 17 00:00:00 2001
From: June <1601745371@qq.com>
Date: Wed, 4 Oct 2023 03:25:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B8=90=E5=8F=98?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  4 ++--
 src/components/colorSelector.vue | 26 ++++++++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 5fc8a4f6..074cce55 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@vueuse/core": "^10.1.0",
     "axios": "^1.3.4",
-    "color-gradient-picker-vue3": "^1.0.3",
+    "color-gradient-picker-vue3": "^2.0.1",
     "events": "^3.3.0",
     "fabric": "^5.2.1",
     "fontfaceobserver": "^2.1.0",
@@ -69,4 +69,4 @@
       "prettier --write"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/colorSelector.vue b/src/components/colorSelector.vue
index 7699b20f..35405a7a 100644
--- a/src/components/colorSelector.vue
+++ b/src/components/colorSelector.vue
@@ -20,22 +20,17 @@
     <div v-if="isGradient">
       <div class="gradient-bar" :style="bgStr"></div>
       <!-- 颜色插件 -->
-      <div class="ivu-poptip-inner">
+      <div class="ivu-poptip-popper ivu-poptip-inner">
         <gradientColorPicker
           :is-gradient="true"
           :gradient="currentGradient"
-          :on-end-change="changeGradientColor"
+          @change="changeGradientColor"
+          :cancel-text="$t('cancel')"
+          :confirm-text="$t('ok')"
         />
       </div>
     </div>
 
-    <!-- <div class="ivu-poptip-popper ivu-poptip-inner">
-      <gradientColorPicker
-        :is-gradient="true"
-        :gradient="currentGradient"
-        :on-end-change="changeGradientColor"
-      />
-    </div> -->
     <!-- 纯色选择器 -->
     <ColorPicker v-show="!isGradient" v-model="fill" @on-change="changePureColor" alpha />
   </div>
@@ -160,22 +155,29 @@ const checkColor = (val) => {
 };
 const changeGradientColor = (val) => {
   const activeObject = canvasEditor.canvas.getActiveObjects()[0];
+  const { gradient } = val;
   if (activeObject) {
-    const currentGradient = cssToFabricGradient(val, activeObject);
+    const currentGradient = cssToFabricGradient(gradient, activeObject);
     // TODO:
     emitChange('change', currentGradient);
 
     // 保存角度，用于下一次选中展示
-    activeObject.set(props.angleKey, val.degree);
+    activeObject.set(props.angleKey, gradient.degree);
     setGradientBar(val);
   }
 };
 // 设置渐变颜色条
 const setGradientBar = (val) => {
-  bgStr.value = `background:${val.style.replace('radial', 'linear')};`;
+  if (val.gradient.type === 'linear') {
+    bgStr.value = `background: ${val.style};`;
+  } else {
+    bgStr.value = `background: ${val.style.replace('radial', 'linear')};`;
+  }
 };
 // Fabric渐变bar背景设置
 const fabricGradientToBar = (val) => {
+  // 百分比排序
+  val.colorStops.sort((a, b) => a.offset - b.offset);
   const str = val.colorStops.map((item) => `${item.color} ${item.offset * 100}%`);
   bgStr.value = `background: linear-gradient(124deg, ${str});`;
 };