如何正确地做到这一点，以便在变换一个形状时，在 react-konva 中变换另一个形状？

Question

我需要变换一个形状以同时变换另一个形状以填充空闲 space。 我怎样才能正确地做出反应？ 现在我所做的根本无法正常工作，我不知道如何以不同的方式去做

演示：https://stackblitz.com/edit/vitejs-vite-q5jn1d?file=src/Template.jsx

Answer 1

您无需对 Konva 节点施展任何魔法，也无需手动触摸它们。只需使用您的反应状态即可。

onChange={(newAttrs) => {
  setTemplates((currTemplates) =>
    currTemplates.map((t) => {
      if (t.name === newAttrs.name) {
        return { anchors: t.anchors, ...newAttrs };
      } else if (t.name === 'vertical-p1') {
        return {
          ...t,
          height: newAttrs.y - 10,
        };
      } else if (t.name === 'vertical-p2') {
        return {
          ...t,
          y: newAttrs.height + 10,
          height: 600 - (newAttrs.height + 10),
        };
      }
    })
  );
}}

https://stackblitz.com/edit/vitejs-vite-ynemv6?file=src%2FApp.jsx

另外，你可以多提升自己的状态，减少可能的冲突。例如。而不是在您的州定义“矩形”。您可以只有 canvas 的 width/height 和分隔符的 y 位置。可以从状态计算形状的属性。