From 01874ffd74ee73a266ded106cd36b4b0fe4f689f Mon Sep 17 00:00:00 2001
From: "yuekin.wang" <yuelin.wang@xbongbong.com>
Date: Thu, 21 Dec 2023 16:38:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=89=B2=E6=9D=BF=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/colorPicker/Area/Hue/index.vue | 116 ++--
 .../colorPicker/Area/Picker/index.vue         | 155 ++---
 src/components/colorPicker/Area/index.vue     |   4 +-
 src/components/colorPicker/Gradient/index.vue | 625 +++++++++---------
 src/utils/color/color.ts                      |   1 +
 .../panel/rightPanel/attrs/canvasAttr.vue     | 231 +++----
 6 files changed, 579 insertions(+), 553 deletions(-)

diff --git a/src/components/colorPicker/Area/Hue/index.vue b/src/components/colorPicker/Area/Hue/index.vue
index 3a1925e..32f0e66 100644
--- a/src/components/colorPicker/Area/Hue/index.vue
+++ b/src/components/colorPicker/Area/Hue/index.vue
@@ -1,75 +1,81 @@
 <template>
-    <div class="hue">
-        <div ref="hueRef" class="hue-area">
-            <div class="picker-cursor" :style="pointerStyle"></div>
-        </div>
+  <div class="hue">
+    <div ref="hueRef" class="hue-area" @click="hueAreaClick">
+      <div class="picker-cursor" :style="pointerStyle"></div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, onMounted, computed} from 'vue'
-import {isDefined, usePointerSwipe} from '@vueuse/core'
-import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue";
+import { isDefined, usePointerSwipe } from "@vueuse/core";
+import { Color } from "@/utils/color/color";
 
 const props = defineProps<{
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-}>()
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>();
 
-const hueRef = ref<HTMLDivElement>()
+const hueRef = ref<HTMLDivElement>();
 
 const state = reactive({
-    width: 0,
-})
+  width: 0,
+});
 
 const pointerStyle = computed(() => {
-    const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const {r, g, b} = new Color(new HSVA(props.hue, 1, 1, 1)).rgba
-    const offsetLeft = (((props.hue * state.width) / 360) | 0) - 8
-    return {
-        left: `${offsetLeft}px`,
-        // background: `rgb(${r}, ${g}, ${b})`,
-        background: color.rgb,
-    }
-})
+  const color = new Color(`hsva(${props.hue},1,1,1)`);
+  // const {r, g, b} = new Color(new HSVA(props.hue, 1, 1, 1)).rgba
+  const offsetLeft = (((props.hue * state.width) / 360) | 0) - 8;
+  return {
+    left: `${offsetLeft}px`,
+    // background: `rgb(${r}, ${g}, ${b})`,
+    background: color.rgb,
+  };
+});
 
 onMounted(() => {
-    if (isDefined(hueRef)) {
-        state.width = hueRef.value.clientWidth
-    }
-})
+  if (isDefined(hueRef)) {
+    state.width = hueRef.value.clientWidth;
+    rect = hueRef.value?.getBoundingClientRect()
+    props.updateColor(getColor(), "onChange");
+  }
+});
 
-let rect: DOMRect | undefined
+let rect: DOMRect | undefined;
 
 const getColor = () => {
-    if (!isDefined(rect)) return
-    const value = posEnd.x - rect.x
-    const color = new Color(`hsva(${(360 * value) / state.width},${props.saturation},${props.value},1)`)
-    // const hsva = new HSVA((360 * value) / state.width, props.saturation, props.value, 1)
-    // const {r, g, b} = new Color(hsva).rgba
-    return {
-        r:color.getRgba().r,
-        g:color.getRgba().g,
-        b:color.getRgba().b,
-        hue: color.hue,
-    }
+  if (!isDefined(rect)) return;
+  const value = Math.max(0, posEnd.x - rect.x)
+  const color = new Color(
+    `hsva(${(360 * value) / state.width},${props.saturation},${props.value},1)`
+  );
+  return {
+    r: color.getRgba().r,
+    g: color.getRgba().g,
+    b: color.getRgba().b,
+    hue: color.hue,
+  };
 }
 
-const {posEnd} = usePointerSwipe(hueRef, {
-    threshold: 0,
-    onSwipeStart() {
-        rect = hueRef.value?.getBoundingClientRect()
-        props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-        if (!isDefined(rect)) return
-        props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-        if (!isDefined(rect)) return
-        props.updateColor(getColor(), 'onEndChange')
-    },
-})
+const hueAreaClick = () => {
+  props.updateColor(getColor(), "onChange")
+}
+
+const { posEnd } = usePointerSwipe(hueRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = hueRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onStartChange");
+  },
+  onSwipe() {
+    if (!isDefined(rect)) return;
+    props.updateColor(getColor(), "onChange");
+  },
+  onSwipeEnd() {
+    if (!isDefined(rect)) return;
+    props.updateColor(getColor(), "onEndChange");
+  },
+});
 </script>
diff --git a/src/components/colorPicker/Area/Picker/index.vue b/src/components/colorPicker/Area/Picker/index.vue
index f7f7a53..042ca53 100644
--- a/src/components/colorPicker/Area/Picker/index.vue
+++ b/src/components/colorPicker/Area/Picker/index.vue
@@ -1,93 +1,100 @@
 <template>
   <div ref="pickerAreaRef" class="spectrum-map" :style="pickerStyle">
-    <div class="spectrum"></div>
+    <div class="spectrum" @click="spectrumClick"></div>
     <div class="picker-cursor" :style="pointerStyle"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, computed } from 'vue'
-  import { clamp, isDefined, usePointerSwipe } from '@vueuse/core'
-  import {Color} from '@/utils/color/color'
+import { ref, reactive, onMounted, computed } from "vue";
+import { clamp, isDefined, usePointerSwipe } from "@vueuse/core";
+import { Color } from "@/utils/color/color";
 
-  const props = defineProps<{
-    red: number
-    green: number
-    blue: number
-    alpha: number
-    hue: number
-    saturation: number
-    value: number
-    updateColor: Function
-  }>()
+const props = defineProps<{
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+  hue: number;
+  saturation: number;
+  value: number;
+  updateColor: Function;
+}>();
 
-  const pickerAreaRef = ref<HTMLDivElement>()
+const pickerAreaRef = ref<HTMLDivElement>();
 
-  const state = reactive({
-    width: 0,
-    height: 0,
-  })
+const state = reactive({
+  width: 0,
+  height: 0,
+});
 
-  const offsetLeft = computed(() => {
-    return Math.round(props.saturation * state.width - 8)
-  })
+const offsetLeft = computed(() => {
+  return Math.round(props.saturation * state.width - 8);
+});
 
-  const offsetTop = computed(() =>
-    Math.max(Math.round(state.height - props.value * state.height - 14), -6),
-  )
+const offsetTop = computed(() =>
+  Math.max(Math.round(state.height - props.value * state.height - 14), -6)
+);
 
-  const pointerStyle = computed(() => {
-    return {
-      backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
-      left: `${offsetLeft.value}px`,
-      top: `${offsetTop.value}px`,
-    }
-  })
+const pointerStyle = computed(() => {
+  return {
+    backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
+    left: `${offsetLeft.value}px`,
+    top: `${offsetTop.value}px`,
+  };
+});
 
-  const pickerStyle = computed(() => {
-      const color = new Color(`hsva(${props.hue},1,1,1)`)
-    // const color = new Color(new HSVA(props.hue, 1, 1, 1))
-    // const { r, g, b } = color.rgba
-    return {
-      backgroundColor: color.rgb,
-    }
-  })
+const pickerStyle = computed(() => {
+  const color = new Color(`hsva(${props.hue},1,1,1)`);
+  // const color = new Color(new HSVA(props.hue, 1, 1, 1))
+  // const { r, g, b } = color.rgba
+  return {
+    backgroundColor: color.rgb,
+  };
+});
 
-  onMounted(() => {
-    if (isDefined(pickerAreaRef)) {
-      state.width = pickerAreaRef.value.clientWidth
-      state.height = pickerAreaRef.value.clientHeight
-    }
-  })
+onMounted(() => {
+  if (isDefined(pickerAreaRef)) {
+    state.width = pickerAreaRef.value.clientWidth;
+    state.height = pickerAreaRef.value.clientHeight;
+    rect = pickerAreaRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onChange")
+  }
+});
 
-  let rect: DOMRect | undefined
+let rect: DOMRect | undefined;
 
-  const getColor = () => {
-    if (!isDefined(rect)) return
-    let x = clamp(posEnd.x - rect.x, 0, state.width)
-    let y = clamp(posEnd.y - rect.y, 0, state.height)
-    const saturation = x / state.width
-    const value = 1 - y / state.height
-      const color = new Color(`hsva(${props.hue},${saturation},${value},${props.alpha})`)
-    // const color = new Color(new HSVA(props.hue, saturation, value, props.alpha))
-    return {
-      ...color.getRgba(),
-      saturation,
-      value,
-    }
-  }
+const getColor = () => {
+  if (!isDefined(rect)) return;
+  let x = clamp(posEnd.x - rect.x, 0, state.width);
+  let y = clamp(posEnd.y - rect.y, 0, state.height);
+  const saturation = x / state.width;
+  const value = 1 - y / state.height;
+  const color = new Color(
+    `hsva(${props.hue},${saturation},${value},${props.alpha})`
+  );
+  return {
+    ...color.getRgba(),
+    saturation,
+    value,
+  };
+};
+
+const spectrumClick = (obj: any) => {
+  props.updateColor(getColor(), "onChange")
+}
 
-  const { posEnd } = usePointerSwipe(pickerAreaRef, {
-    threshold: 0,
-    onSwipeStart() {
-      rect = pickerAreaRef.value?.getBoundingClientRect()
-      props.updateColor(getColor(), 'onStartChange')
-    },
-    onSwipe() {
-      props.updateColor(getColor(), 'onChange')
-    },
-    onSwipeEnd() {
-      props.updateColor(getColor(), 'onEndChange')
-    },
-  })
+const { posEnd } = usePointerSwipe(pickerAreaRef, {
+  threshold: 0,
+  onSwipeStart() {
+    rect = pickerAreaRef.value?.getBoundingClientRect();
+    props.updateColor(getColor(), "onStartChange");
+  },
+  onSwipe() {
+    props.updateColor(getColor(), "onChange");
+  },
+  onSwipeEnd() {
+    props.updateColor(getColor(), "onEndChange");
+  },
+});
 </script>
diff --git a/src/components/colorPicker/Area/index.vue b/src/components/colorPicker/Area/index.vue
index dc98329..2fcba01 100644
--- a/src/components/colorPicker/Area/index.vue
+++ b/src/components/colorPicker/Area/index.vue
@@ -24,7 +24,7 @@
       :update-color="updateColor"
     />
 
-    <div class="preview">
+    <!-- <div class="preview">
       <Preview
         :red="red"
         :green="green"
@@ -39,7 +39,7 @@
         <Hue :hue="hue" :saturation="saturation" :value="value" :update-color="updateColor" />
         <Alpha :alpha="alpha" :red="red" :green="green" :blue="blue" :update-color="updateColor" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
diff --git a/src/components/colorPicker/Gradient/index.vue b/src/components/colorPicker/Gradient/index.vue
index bde9f7d..9a8b95e 100644
--- a/src/components/colorPicker/Gradient/index.vue
+++ b/src/components/colorPicker/Gradient/index.vue
@@ -1,362 +1,373 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author: June
- * @Date: 2023-03-19 20:10:11
- * @LastEditors: June
- * @LastEditTime: 2023-05-12 22:58:54
--->
 <template>
-    <GradientControls
-            v-if="!solidColor"
-            :type="state.gradientType"
-            :change-gradient-control="changeGradientControl"
-    />
-
-    <template v-if="state.gradientType === 'pattern'">
-        <div class="pattern-box">
-            <div class="upload-box">
-                <m-a-upload :prefix="baseUrl"
-                            list-type="picture-card"
-                            :action="baseUrl+'/upload'"
-                            v-model="image"
-                            :limit="1"
-                            imagePreview
-                            :onSuccess="patternUploadSuccess"
-                            accept=".png,.jpg,.jpeg"/>
-
-<!--                <a-upload-->
-<!--                    list-type="picture-card"-->
-<!--                    image-preview-->
-<!--                    :limit="1"-->
-<!--                    :onSuccess="patternUploadSuccess"-->
-<!--                    :onError="patternUploadError"-->
-<!--                    :on-before-upload="patternUpload"-->
-<!--                />-->
-            </div>
-            <a-row>
-                <a-col>
-                    <a-select v-model="fit" :options="options">
-                        <template #prefix>
-                            填充模式
-                        </template>
-                    </a-select>
-                </a-col>
-            </a-row>
-            <a-row>
-                <a-col>
-                    <SwipeNumber size="small" v-model="newOpacity" :min="0" :max="100" :step="1" style="padding: 0 12px" label-width="68px">
-                        <template #label>
-                            <div style="text-align: right;padding-right: 12px"><icon-mosaic style="margin-right: 2px"/>透明度</div>
-                        </template>
-                        <template #suffix>
-                            <div>%</div>
-                        </template>
-                    </SwipeNumber>
-                </a-col>
-            </a-row>
-
-        </div>
-    </template>
-    <template v-else>
-        <Area
-                :red="state.colorRed"
-                :green="state.colorGreen"
-                :blue="state.colorBlue"
-                :alpha="state.colorAlpha"
-                :hue="state.colorHue"
-                :saturation="state.colorSaturation"
-                :value="state.colorValue"
-                :update-color="updateColor"
-                :is-gradient="true"
-                :type="state.gradientType"
-                :points="state.gradientPoints"
-                :active-point-index="state.activePointIndex"
-                :change-gradient-control="changeGradientControl"
-                :change-active-point-index="changeActivePointIndex"
-                :update-gradient-left="updateGradientLeft"
-                :add-point="addPoint"
-                :remove-point="removePoint"
-        />
-        <Preview
-                :red="state.colorRed"
-                :green="state.colorGreen"
-                :blue="state.colorBlue"
-                :alpha="state.colorAlpha"
-                :update-color="updateColor"
-                :mode="mode"
+  <GradientControls
+    v-if="!solidColor"
+    :type="state.gradientType"
+    :change-gradient-control="changeGradientControl"
+  />
+
+  <template v-if="state.gradientType === 'pattern'">
+    <div class="pattern-box">
+      <div class="upload-box">
+        <m-a-upload
+          :prefix="baseUrl"
+          list-type="picture-card"
+          :action="baseUrl + '/upload'"
+          v-model="image"
+          :limit="1"
+          imagePreview
+          :onSuccess="patternUploadSuccess"
+          accept=".png,.jpg,.jpeg"
         />
-    </template>
+      </div>
+      <a-row>
+        <a-col>
+          <a-select v-model="fit" :options="options">
+            <template #prefix> 填充模式 </template>
+          </a-select>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col>
+          <SwipeNumber
+            size="small"
+            v-model="newOpacity"
+            :min="0"
+            :max="100"
+            :step="1"
+            style="padding: 0 12px"
+            label-width="68px"
+          >
+            <template #label>
+              <div style="text-align: right; padding-right: 12px">
+                <icon-mosaic style="margin-right: 2px" />透明度
+              </div>
+            </template>
+            <template #suffix>
+              <div>%</div>
+            </template>
+          </SwipeNumber>
+        </a-col>
+      </a-row>
+    </div>
+  </template>
+  <template v-else>
+    <Area
+      :red="state.colorRed"
+      :green="state.colorGreen"
+      :blue="state.colorBlue"
+      :alpha="state.colorAlpha"
+      :hue="state.colorHue"
+      :saturation="state.colorSaturation"
+      :value="state.colorValue"
+      :update-color="updateColor"
+      :is-gradient="true"
+      :type="state.gradientType"
+      :points="state.gradientPoints"
+      :active-point-index="state.activePointIndex"
+      :change-gradient-control="changeGradientControl"
+      :change-active-point-index="changeActivePointIndex"
+      :update-gradient-left="updateGradientLeft"
+      :add-point="addPoint"
+      :remove-point="removePoint"
+    />
+    <Preview
+      :red="state.colorRed"
+      :green="state.colorGreen"
+      :blue="state.colorBlue"
+      :alpha="state.colorAlpha"
+      :update-color="updateColor"
+      :mode="mode"
+    />
+  </template>
 </template>
 
 <script lang="ts" setup>
-import {reactive, onMounted, onBeforeUnmount} from 'vue'
-import GradientControls from './GradientControls/index.vue'
-import Preview from '../Preview/index.vue'
-import Area from '../Area/index.vue'
-import {clamp} from '@vueuse/core'
-import {ColorType, Props} from '@/components/colorPicker/interface'
-import {RGBA} from '@/utils/color'
-import {Color} from '@/utils/color/color'
-import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
-import {useEditor} from '@/views/Editor/app'
-import {typeUtil} from "@/views/Editor/utils/utils";
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+import GradientControls from "./GradientControls/index.vue";
+import Preview from "../Preview/index.vue";
+import Area from "../Area/index.vue";
+import { clamp } from "@vueuse/core";
+import { ColorType, Props } from "@/components/colorPicker/interface";
+import { RGBA } from "@/utils/color";
+import { Color } from "@/utils/color/color";
+import { useActiveObjectModel } from "@/views/Editor/hooks/useActiveObjectModel";
+import { useEditor } from "@/views/Editor/app";
+import { typeUtil } from "@/views/Editor/utils/utils";
 import MAUpload from "@/components/upload/m-a-upload.vue";
-import {replaceElementToNewArr} from "@/utils/utils";
+import { replaceElementToNewArr } from "@/utils/utils";
 import SwipeNumber from "@/components/swipeNumber/swipeNumber.vue";
 import NP from "number-precision";
 const baseUrl = import.meta.env.VITE_UPLOAD_BASE_URL;
-const {canvas, undoRedo} = useEditor()
+const { canvas, undoRedo } = useEditor();
 const options = reactive([
-    {value: 'cover', label: '覆盖'},
-    {value: 'fit', label: '适应'},
-    {value: 'strench', label: '拉伸'},
-    {value: 'clip', label: '裁剪'},
-    {value: 'repeat', label: '平铺'},
-])
-const props = defineProps<Required<Props>>()
+  { value: "cover", label: "覆盖" },
+  { value: "fit", label: "适应" },
+  { value: "strench", label: "拉伸" },
+  { value: "clip", label: "裁剪" },
+  { value: "repeat", label: "平铺" },
+]);
+const props = defineProps<Required<Props>>();
 
 const state = reactive({
-    attr: props.attr,
-    index: props.index,
-    activePointIndex: 0,
-    gradientPoints: props.gradient.points,
-    activePoint: props.gradient.points[0],
-    colorRed: props.gradient.points[0].red,
-    colorGreen: props.gradient.points[0].green,
-    colorBlue: props.gradient.points[0].blue,
-    colorAlpha: props.gradient.points[0].alpha,
-    colorHue: 0,
-    colorSaturation: 1,
-    colorValue: 1,
-    gradientType: props.gradient.type,
-})
-
-const object = useActiveObjectModel(state.attr)
+  attr: props.attr,
+  index: props.index,
+  activePointIndex: 0,
+  gradientPoints: props.gradient.points,
+  activePoint: props.gradient.points[0],
+  colorRed: props.gradient.points[0].red,
+  colorGreen: props.gradient.points[0].green,
+  colorBlue: props.gradient.points[0].blue,
+  colorAlpha: props.gradient.points[0].alpha,
+  colorHue: 0,
+  colorSaturation: 1,
+  colorValue: 1,
+  gradientType: props.gradient.type,
+});
+
+const object = useActiveObjectModel(state.attr);
 const fit = computed({
-    get() {
-        if (typeUtil.isPattern(object.value.modelValue[state.index])) {
-            return object.value.modelValue[state.index].mode
-        }
-    },
-    set(value) {
-        if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
-            // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
-            const elementVal : any= object.value.modelValue[state.index]
-            const newElement = replaceElementToNewArr(object.value.modelValue,state.index,{
-                ...elementVal,
-                mode: value,
-            })
-            object.value.onChange(newElement)
+  get() {
+    if (typeUtil.isPattern(object.value.modelValue[state.index])) {
+      return object.value.modelValue[state.index].mode;
+    }
+  },
+  set(value) {
+    if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
+      // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
+      const elementVal: any = object.value.modelValue[state.index];
+      const newElement = replaceElementToNewArr(
+        object.value.modelValue,
+        state.index,
+        {
+          ...elementVal,
+          mode: value,
         }
-    },
-})
+      );
+      object.value.onChange(newElement);
+    }
+  },
+});
 const newOpacity = computed({
-    get() {
-        if (typeUtil.isPattern(object.value.modelValue[state.index])) {
-            let opacity = 100
-            if (object.value.modelValue[state.index].opacity !== undefined){
-                opacity = NP.round((object.value.modelValue[state.index].opacity * 100),2)
-            }
-            return opacity
-        }
-    },
-    set(value) {
-        if (typeUtil.isPattern(object.value.modelValue[state.index]) && value !== undefined) {
-            // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
-            const elementVal : any= object.value.modelValue[state.index]
-            const newElement = replaceElementToNewArr(object.value.modelValue,state.index,{
-                ...elementVal,
-                opacity: NP.round((value / 100),2),
-            })
-            object.value.onChange(newElement)
+  get() {
+    if (typeUtil.isPattern(object.value.modelValue[state.index])) {
+      let opacity = 100;
+      if (object.value.modelValue[state.index].opacity !== undefined) {
+        opacity = NP.round(
+          object.value.modelValue[state.index].opacity * 100,
+          2
+        );
+      }
+      return opacity;
+    }
+  },
+  set(value) {
+    if (
+      typeUtil.isPattern(object.value.modelValue[state.index]) &&
+      value !== undefined
+    ) {
+      // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
+      const elementVal: any = object.value.modelValue[state.index];
+      const newElement = replaceElementToNewArr(
+        object.value.modelValue,
+        state.index,
+        {
+          ...elementVal,
+          opacity: NP.round(value / 100, 2),
         }
-    },
-})
+      );
+      object.value.onChange(newElement);
+    }
+  },
+});
 const image = computed({
-    get() {
-        if (typeUtil.isPattern(object.value.modelValue[state.index])) {
-            return object.value.modelValue[state.index].url
-        }
-    },
-    set(value) {
-        if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
-            // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
-            let elementVal : any= object.value.modelValue[state.index]
-            if (!elementVal.mode){
-                elementVal.mode = 'cover'
-            }
-            const newElement = replaceElementToNewArr(object.value.modelValue,state.index,{
-                ...elementVal,
-                url: value,
-            })
-            object.value.onChange(newElement)
+  get() {
+    if (typeUtil.isPattern(object.value.modelValue[state.index])) {
+      return object.value.modelValue[state.index].url;
+    }
+  },
+  set(value) {
+    if (typeUtil.isPattern(object.value.modelValue[state.index]) && value) {
+      // 这里使用新数组，因为leafer是浅监听的 修改数组值无法监听到并重新渲染
+      let elementVal: any = object.value.modelValue[state.index];
+      if (!elementVal.mode) {
+        elementVal.mode = "cover";
+      }
+      const newElement = replaceElementToNewArr(
+        object.value.modelValue,
+        state.index,
+        {
+          ...elementVal,
+          url: value,
         }
-    },
-})
-
+      );
+      object.value.onChange(newElement);
+    }
+  },
+});
 
 const getChangeData = () => ({
-    points:
-        state.gradientType === 'color'
-            ? [state.gradientPoints[state.activePointIndex]]
-            : state.gradientPoints,
-    type: state.gradientType,
-    // style: generateGradientStyle(state.gradientPoints, state.gradientType),
-})
+  points:
+    state.gradientType === "color"
+      ? [state.gradientPoints[state.activePointIndex]]
+      : state.gradientPoints,
+  type: state.gradientType,
+  // style: generateGradientStyle(state.gradientPoints, state.gradientType),
+});
 
 const onChange = () => {
-    props.onChange && props.onChange(getChangeData())
-}
+  props.onChange && props.onChange(getChangeData());
+};
 
 const removePoint = (index = state.activePointIndex) => {
-    if (state.gradientPoints.length <= 2) {
-        return
-    }
+  if (state.gradientPoints.length <= 2) {
+    return;
+  }
 
-    state.gradientPoints.splice(index, 1)
+  state.gradientPoints.splice(index, 1);
 
-    if (index > 0) {
-        state.activePointIndex = index - 1
-    }
+  if (index > 0) {
+    state.activePointIndex = index - 1;
+  }
 
-    onChange()
-}
+  onChange();
+};
 
 const keyUpHandler = (event: KeyboardEvent) => {
-    if (event.keyCode === 46 || event.keyCode === 8) {
-        removePoint(state.activePointIndex)
-    }
-}
+  if (event.keyCode === 46 || event.keyCode === 8) {
+    removePoint(state.activePointIndex);
+  }
+};
 
 const changeActivePointIndex = (index: number) => {
-    state.activePointIndex = index
-    state.activePoint = state.gradientPoints[index]
-    const {red, green, blue, alpha} = state.activePoint
-    state.colorRed = red
-    state.colorGreen = green
-    state.colorBlue = blue
-    state.colorAlpha = alpha
-
-    const color = new Color(`rgba(${red},${green},${blue},alpha)`)
-    const {h, s, v} = color.getHsva()
-
-    state.colorHue = h
-    state.colorSaturation = s
-    state.colorValue = v
-}
+  state.activePointIndex = index;
+  state.activePoint = state.gradientPoints[index];
+  const { red, green, blue, alpha } = state.activePoint;
+  state.colorRed = red;
+  state.colorGreen = green;
+  state.colorBlue = blue;
+  state.colorAlpha = alpha;
+
+  const color = new Color(`rgba(${red},${green},${blue},alpha)`);
+  const { h, s, v } = color.getHsva();
+
+  state.colorHue = h;
+  state.colorSaturation = s;
+  state.colorValue = v;
+};
 
 const changeGradientControl = (type: ColorType) => {
-    type = type ?? state.gradientType
+  type = type ?? state.gradientType;
 
-    state.gradientType = type
+  state.gradientType = type;
 
-    onChange()
-}
+  onChange();
+};
 
 const updateColor = (
-    {
-        r,
-        g,
-        b,
-        a,
-        hue,
-        saturation,
-        value,
-    }: {
-        r?: number
-        g?: number
-        b?: number
-        a?: number
-        hue?: number
-        saturation?: number
-        value?: number
-    },
-    actionName: 'onStartChange' | 'onChange' | 'onEndChange' = 'onChange',
+  {
+    r,
+    g,
+    b,
+    a,
+    hue,
+    saturation,
+    value,
+  }: {
+    r?: number;
+    g?: number;
+    b?: number;
+    a?: number;
+    hue?: number;
+    saturation?: number;
+    value?: number;
+  },
+  actionName: "onStartChange" | "onChange" | "onEndChange" = "onChange"
 ) => {
-    r = r ?? state.colorRed
-    g = g ?? state.colorGreen
-    b = b ?? state.colorBlue
-    a = a ?? state.colorAlpha
-    hue = hue ?? state.colorHue
-    saturation = saturation ?? state.colorSaturation
-    value = value ?? state.colorValue
-
-    const localGradientPoints = state.gradientPoints.slice()
-
-    localGradientPoints[state.activePointIndex] = {
-        ...localGradientPoints[state.activePointIndex],
-        red: r,
-        green: g,
-        blue: b,
-        alpha: a,
-    }
-
-    state.colorRed = r
-    state.colorGreen = g
-    state.colorBlue = b
-    state.colorAlpha = a
-    state.colorHue = hue
-    state.colorSaturation = saturation
-    state.colorValue = value
-    state.gradientPoints = localGradientPoints
-
-    const action = props[actionName]
-
-    action && action(getChangeData())
-}
+  r = r ?? state.colorRed;
+  g = g ?? state.colorGreen;
+  b = b ?? state.colorBlue;
+  a = a ?? state.colorAlpha;
+  hue = hue ?? state.colorHue;
+  saturation = saturation ?? state.colorSaturation;
+  value = value ?? state.colorValue;
+
+  const localGradientPoints = state.gradientPoints.slice();
+
+  localGradientPoints[state.activePointIndex] = {
+    ...localGradientPoints[state.activePointIndex],
+    red: r,
+    green: g,
+    blue: b,
+    alpha: a,
+  };
+
+  state.colorRed = r;
+  state.colorGreen = g;
+  state.colorBlue = b;
+  state.colorAlpha = a;
+  state.colorHue = hue;
+  state.colorSaturation = saturation;
+  state.colorValue = value;
+  state.gradientPoints = localGradientPoints;
+
+  console.log(props)
+  const action = props[actionName];
+
+  action && action(getChangeData());
+};
 
 const updateGradientLeft = (
-    left: number,
-    index: number,
-    actionName: 'onStartChange' | 'onChange' | 'onEndChange' = 'onChange',
+  left: number,
+  index: number,
+  actionName: "onStartChange" | "onChange" | "onEndChange" = "onChange"
 ) => {
-    state.gradientPoints[index].left = clamp(left, 0, 100)
+  state.gradientPoints[index].left = clamp(left, 0, 100);
 
-    const action = props[actionName]
+  const action = props[actionName];
 
-    action && action(getChangeData())
-}
+  action && action(getChangeData());
+};
 
 const addPoint = (left: number) => {
-    left = clamp(left, 0, 100)
-    state.gradientPoints.push({
-        ...state.gradientPoints[state.activePointIndex],
-        left,
-        // todo
-        alpha: 1,
-    })
-
-    state.activePointIndex = state.gradientPoints.length - 1
-
-    onChange()
-}
+  left = clamp(left, 0, 100);
+  state.gradientPoints.push({
+    ...state.gradientPoints[state.activePointIndex],
+    left,
+    // todo
+    alpha: 1,
+  });
+
+  state.activePointIndex = state.gradientPoints.length - 1;
+
+  onChange();
+};
 const patternUploadSuccess = (response: any) => {
-  console.log('response=',response)
-}
+  console.log("response=", response);
+};
 const patternUploadError = (response: any) => {
-  console.log('response=',response)
-}
+  console.log("response=", response);
+};
 const patternUpload = (files: File[]) => {
-    console.log('files=',files)
+  console.log("files=", files);
   // uploadFile().then(value => {
-      // files
+  // files
   // })
-}
+};
 
 onMounted(() => {
-
-    const color = new Color(`rgba(${state.colorRed},${state.colorGreen},${state.colorBlue},1)`)
-    // const color = new Color(new RGBA(state.colorRed, state.colorGreen, state.colorBlue, 1))
-    const {h, s, v} = color.getHsva()
-
-    state.colorHue = h
-    state.colorSaturation = s
-    state.colorValue = v
-    document.addEventListener('keyup', keyUpHandler)
-})
+  const color = new Color(
+    `rgba(${state.colorRed},${state.colorGreen},${state.colorBlue},1)`
+  );
+  // const color = new Color(new RGBA(state.colorRed, state.colorGreen, state.colorBlue, 1))
+  const { h, s, v } = color.getHsva();
+
+  state.colorHue = h;
+  state.colorSaturation = s;
+  state.colorValue = v;
+  document.addEventListener("keyup", keyUpHandler);
+});
 
 onBeforeUnmount(() => {
-    document.removeEventListener('keyup', keyUpHandler)
-})
+  document.removeEventListener("keyup", keyUpHandler);
+});
 </script>
diff --git a/src/utils/color/color.ts b/src/utils/color/color.ts
index 1a561cb..54b12ca 100644
--- a/src/utils/color/color.ts
+++ b/src/utils/color/color.ts
@@ -399,6 +399,7 @@ export class Color {
   }
 
   static hex2color(hex: string, a: number) {
+    console.log('in it')
     const color = tinyColor(hex);
     color.setAlpha(a);
     return color.toHexString();
diff --git a/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue b/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue
index 531c863..5aacfbb 100644
--- a/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue
+++ b/src/views/Editor/layouts/panel/rightPanel/attrs/canvasAttr.vue
@@ -1,138 +1,139 @@
 <script setup lang="ts">
-import Panel from './panel.vue'
-import {useActiveObjectModel} from '@/views/Editor/hooks/useActiveObjectModel'
-import {useEditor} from '@/views/Editor/app'
-import {useColor} from '@/views/Editor/hooks/useActiveObjectColor'
-import {watch} from "vue";
+import Panel from "./panel.vue";
+import { useActiveObjectModel } from "@/views/Editor/hooks/useActiveObjectModel";
+import { useEditor } from "@/views/Editor/app";
+import { useColor } from "@/views/Editor/hooks/useActiveObjectColor";
+import { watch } from "vue";
 import SwipeNumber from "@/components/swipeNumber/swipeNumber.vue";
 
-const {canvas} = useEditor()
+const { canvas } = useEditor();
 
-const rotation = useActiveObjectModel('rotation')
-const width = useActiveObjectModel('width')
-const height = useActiveObjectModel('height')
-const fill = useActiveObjectModel('fill')
-const overflow = useActiveObjectModel('overflow')
+const rotation = useActiveObjectModel("rotation");
+const width = useActiveObjectModel("width");
+const height = useActiveObjectModel("height");
+const fill = useActiveObjectModel("fill");
+const overflow = useActiveObjectModel("overflow");
 
-const {formatValue, colorBlock, changeColor, closeColorPicker, openColorPicker, readonly} =
-    useColor(
-        computed(() => fill.value.modelValue),
-        {
-            attr: 'fill',
-            onChange() {
-                fill.value.onChange(fillArray.value)
-            },
-        },
-    )
+const {
+  formatValue,
+  colorBlock,
+  changeColor,
+  closeColorPicker,
+  openColorPicker,
+  readonly,
+} = useColor(
+  computed(() => fill.value.modelValue),
+  {
+    attr: "fill",
+    onChange() {
+      fill.value.onChange(fillArray.value);
+    },
+  }
+);
 
-watch(canvas.activeObject, () => closeColorPicker())
+watch(canvas.activeObject, () => closeColorPicker());
 
-
-const fillArray = ref([])
+const fillArray = ref([]);
 watchEffect(() => {
-    if (fill.value.modelValue) {
-        fillArray.value = <any>fill.value.modelValue
-    } else {
-        fillArray.value = []
-    }
-})
+  if (fill.value.modelValue) {
+    fillArray.value = <any>fill.value.modelValue;
+  } else {
+    fillArray.value = [];
+  }
+});
 
 const refreshFill = () => {
-    fill.value.onChange([])
-    fill.value.onChange(fillArray.value.length <= 0 ? [] : fillArray.value)
-}
+  fill.value.onChange([]);
+  fill.value.onChange(fillArray.value.length <= 0 ? [] : fillArray.value);
+};
 const addFill = () => {
-    fill.value.onChange([])
-    fillArray.value.push({
-        type: 'solid',
-        color: 'rgba(151,151,151,1)',
-    })
-    refreshFill()
-}
+  fill.value.onChange([]);
+  fillArray.value.push({
+    type: "solid",
+    color: "rgba(151,151,151,1)",
+  });
+  refreshFill();
+};
 const removeFill = (index) => {
-    fillArray.value.splice(index, 1)
-    refreshFill()
-}
-const overflowCheck = ref(false)
+  fillArray.value.splice(index, 1);
+  refreshFill();
+};
+const overflowCheck = ref(false);
 
 watchEffect(() => {
-    if (overflow.value.modelValue === 'hide') {
-        overflowCheck.value = true
-    } else {
-        overflowCheck.value = false
-    }
-})
+  if (overflow.value.modelValue === "hide") {
+    overflowCheck.value = true;
+  } else {
+    overflowCheck.value = false;
+  }
+});
 
 watchEffect(() => {
-    if (overflowCheck.value) {
-        overflow.value.onChange('hide')
-    } else {
-        overflow.value.onChange('show')
-    }
-})
+  if (overflowCheck.value) {
+    overflow.value.onChange("hide");
+  } else {
+    overflow.value.onChange("show");
+  }
+});
 </script>
 
 <template>
-    <div>
-        <div class="p2">
-            <a-row :gutter="[4, 4]" align="center">
-                <a-col :span="10">
-                    <SwipeNumber size="small" :min="0.5" label="宽" v-bind="width"/>
-                </a-col>
-                <a-col :span="10">
-                    <SwipeNumber size="small" :min="0.5" label="高" v-bind="height"/>
-                </a-col>
-                <a-col :span="16">
-                    <a-checkbox v-model="overflowCheck">超出画布隐藏</a-checkbox>
-                </a-col>
-<!--                <a-col :span="10">-->
-<!--                    <SwipeNumber size="small" v-bind="rotation">-->
-<!--                        <template #label>-->
-<!--                            <SvgIcon name="bx-revision"/>-->
-<!--                        </template>-->
-<!--                        <template #suffix>-->
-<!--                            <div class="absolute top-1 right-1">°</div>-->
-<!--                        </template>-->
-<!--                    </SwipeNumber>-->
-<!--                </a-col>-->
-            </a-row>
-        </div>
-        <Panel
-                title="背景"
-                @click-add="addFill"
-        >
-            <a-space direction="vertical">
-                <a-row :gutter="[8, 4]" v-for="(item,index) in fillArray" :key="index">
-                    <a-col :span="20">
-                        <a-col :span="20">
-                            <a-input
-                                    size="mini"
-                                    :model-value="formatValue(index)"
-                                    :readonly="readonly"
-                                    @change="changeColor"
-                                    class="pl0!"
-                            >
-                                <template #prefix>
-                                    <a-button size="mini" class="icon-btn" @click="openColorPicker(index)">
-                                        <template #icon>
-                                            <div v-bind="colorBlock(index)"></div>
-                                        </template>
-                                    </a-button>
-                                </template>
-                            </a-input>
-                        </a-col>
-                    </a-col>
-                    <a-col :span="3.5" class="mlauto">
-                        <a-button size="small" class="icon-btn" v-if="index!==0" @click="removeFill(index)">
-                            <template #icon>
-                                <icon-minus/>
-                            </template>
-                        </a-button>
-                    </a-col>
-                </a-row>
-            </a-space>
-        </Panel>
+  <div>
+    <div class="p2">
+      <a-row :gutter="[4, 4]" align="center">
+        <a-col :span="10">
+          <SwipeNumber size="small" :min="0.5" label="宽" v-bind="width" />
+        </a-col>
+        <a-col :span="10">
+          <SwipeNumber size="small" :min="0.5" label="高" v-bind="height" />
+        </a-col>
+        <a-col :span="16">
+          <a-checkbox v-model="overflowCheck">超出画布隐藏</a-checkbox>
+        </a-col>
+      </a-row>
     </div>
+    <Panel title="背景" @click-add="addFill">
+      <a-space direction="vertical">
+        <a-row :gutter="[8, 4]" v-for="(item, index) in fillArray" :key="index">
+          <a-col :span="20">
+            <a-col :span="20">
+              <a-input
+                size="mini"
+                :model-value="formatValue(index)"
+                :readonly="readonly"
+                @change="changeColor"
+                class="pl0!"
+              >
+                <template #prefix>
+                  <a-button
+                    size="mini"
+                    class="icon-btn"
+                    @click="openColorPicker(index)"
+                  >
+                    <template #icon>
+                      <div v-bind="colorBlock(index)"></div>
+                    </template>
+                  </a-button>
+                </template>
+              </a-input>
+            </a-col>
+          </a-col>
+          <a-col :span="3.5" class="mlauto">
+            <a-button
+              size="small"
+              class="icon-btn"
+              v-if="index !== 0"
+              @click="removeFill(index)"
+            >
+              <template #icon>
+                <icon-minus />
+              </template>
+            </a-button>
+          </a-col>
+        </a-row>
+      </a-space>
+    </Panel>
+  </div>
 </template>
 
 <style scoped lang="less"></style>