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

Question

我需要转换一个形状以同时转换另一个形状，以便它填充可用空间。我怎样才能正确地做出反应？现在我所做的根本没有按应有的方式工作，而且我不知道如何以不同的方式进行

演示：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

此外，您可以进一步改善您的状态，减少可能的冲突。例如，而不是在您的州定义“矩形”。您可以只拥有画布的宽度/高度和y分隔线的位置。形状的属性可以从状态中计算出来。