zhengyiming
11 小时以前 97f29024ce18babeb4b635c5d73f907ac493976e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
  <div v-if="!isSelect">
    <div class="attr-item-box">
      <!-- <h3>{{ $t('bgSeting.color') }}</h3> -->
      <Divider plain orientation="left">
        <h4>{{ $t('bgSeting.color') }}</h4>
      </Divider>
      <Form :label-width="0">
        <FormItem prop="name">
          <ColorPicker v-model="color" @on-change="setThisColor" alpha />
        </FormItem>
      </Form>
      <!-- <Divider plain></Divider> -->
    </div>
    <div class="attr-item-box">
      <!-- <h3>{{ $t('bgSeting.colorMacthing') }}</h3> -->
      <Divider plain orientation="left">
        <h4>{{ $t('bgSeting.colorMacthing') }}</h4>
      </Divider>
      <div class="color-list">
        <template v-for="(item, i) in colorList" :key="item + i">
          <span :style="`background:${item}`" @click="setColor(item)"></span>
        </template>
      </div>
    </div>
 
    <!-- <div>
      <Divider plain orientation="left">
        <h4>蒙版</h4>
      </Divider>
 
      <workspaceMask />
    </div> -->
  </div>
</template>
 
<script setup name="BgBar">
// import workspaceMask from './workspaceMask.vue';
import { ref } from 'vue';
import useSelect from '@/hooks/select';
const { isSelect, canvasEditor } = useSelect();
 
const colorList = ref([
  '#5F2B63',
  '#B23554',
  '#F27E56',
  '#FCE766',
  '#86DCCD',
  '#E7FDCB',
  '#FFDC84',
  '#F57677',
  '#5FC2C7',
  '#98DFE5',
  '#C2EFF3',
  '#DDFDFD',
  '#9EE9D3',
  '#2FC6C8',
  '#2D7A9D',
  '#48466d',
  '#61c0bf',
  '#bbded6',
  '#fae3d9',
  '#ffb6b9',
  '#ffaaa5',
  '#ffd3b6',
  '#dcedc1',
  '#a8e6cf',
]);
 
const color = ref('rgba(255, 255, 255, 1)');
// 背景颜色设置
const setThisColor = () => {
  setColor(color.value);
};
// 背景颜色设置
function setColor(c) {
  const workspace = canvasEditor.canvas.getObjects().find((item) => item.id === 'workspace');
  workspace.set('fill', c);
  canvasEditor.canvas.renderAll();
  color.value = c;
}
 
// 加载模板时回显颜色值
const handleChangeColor = () => {
  const workspace = canvasEditor.canvas.getObjects().find((item) => item.id === 'workspace');
  color.value = workspace.fill;
};
 
onMounted(() => {
  canvasEditor.on('loadJson', handleChangeColor);
});
 
onUnmounted(() => {
  canvasEditor.off('loadJson', handleChangeColor);
});
</script>
 
<style scoped lang="less">
:deep(.ivu-form-item) {
  margin-bottom: 0;
  .ivu-color-picker {
    display: unset;
  }
}
.color-list {
  display: flex;
  flex-wrap: wrap;
  span {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    border: 3px solid #fff;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>