diff --git a/src/component/Canvas/OverallCanvas/demo.vue b/src/component/Canvas/OverallCanvas/demo.vue
index 9446d30e..dd5331e5 100644
--- a/src/component/Canvas/OverallCanvas/demo.vue
+++ b/src/component/Canvas/OverallCanvas/demo.vue
@@ -25,49 +25,95 @@
偏移X
-
+
偏移Y
-
+
角度
-
+
缩放
-
+
水平间距
-
+
垂直间距
-
+
缩放X
-
+
缩放Y
-
+
X
-
+
Y
-
+
角度
-
+
@@ -78,6 +124,7 @@
step="0.1"
min="0"
max="1"
+ @input="updateList(item, 'object.opacity', item.object.opacity)"
/>
@@ -235,51 +282,17 @@
list.value.push(obj);
pingpuRef.value.updataList([{ action: ACTIONS.ADD, data: obj }]);
};
- watch(
- () => list.value,
- () => updateList(),
- { deep: true }
- );
// 监听列表变化属性变更
- const updateList = () => {
- const changeList = [];
- oldList.value.forEach((oldItem) => {
- const newItem = list.value.find((v) => v.token === oldItem.token);
- if (newItem) {
- const arr = findDiffProps(oldItem, newItem);
- arr.forEach((item) => {
- changeList.push({
- ...item,
- token: oldItem.token,
- action: ACTIONS.UPDATE,
- key: convertDotNotationToBracket(item.key),
- });
- });
- } else {
- changeList.push({
- token: oldItem.token,
- action: ACTIONS.DELETE,
- });
- }
- });
- oldList.value = deepCopy(list.value);
- if (changeList.length) {
- pingpuRef.value.updataList(changeList);
- }
- };
- // 递归查找不同的属性
- const findDiffProps = (obj1, obj2, diffProps = [], path = "") => {
- for (const key in obj1) {
- if (typeof obj1[key] === "object") {
- findDiffProps(obj1[key], obj2[key], diffProps, `${path}${key}.`);
- } else if (obj1[key] !== obj2[key]) {
- diffProps.push({
- key: `${path}${key}`,
- value: obj2[key],
- });
- }
- }
- return diffProps;
+ const updateList = (item, key, value) => {
+ if(key === "scale[0]") item.scale[1] = value;
+ pingpuRef.value.updataList([
+ {
+ token: item.token,
+ action: ACTIONS.UPDATE,
+ key,
+ value,
+ },
+ ]);
};
diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue
index 93242d6e..0bc44351 100644
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -263,7 +263,7 @@
case KEYS.FILL_GAPX:
case KEYS.FILL_GAPY:
let pattern = await setFill(
- props.list.find((v) => v.id === item.id)
+ props.list.find((v) => v.token === item.token)
);
object.set("fill", pattern);
break;