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;