调整组内文本大小

如何解决调整组内文本大小

我有一个案例，我想使用中右和中左锚点调整组的大小，但结果不是我们实际期望的。如果使用中右和中左调整组大小，则应调整文本的宽度并保持原始比例。

这是我的问题的沙箱链接： https://codesandbox.io/s/condescending-surf-2qn8f

解决方法

添加了以下代码行并解决了问题。为@lavrton 和@vanquished-wombat 干杯。

 onTransformEnd={(event) => {
                const tr = transformerRef.current;
                const anchorName = tr.getActiveAnchor();
                const fontSizeAnchors = [
                  "top-right","top-left","bottom-left","bottom-right"
                ];

                if (!tr) return;

                tr.nodes().forEach((group) => {
                  const children = group.getChildren();

                  children.forEach((node) => {
                    const textNode = node;

                    if (node.className === "Text") {
                      if (anchorName && fontSizeAnchors.includes(anchorName)) {
                        const absScale = textNode.getAbsoluteScale();

                        textNode.setAttrs({
                          fontSize: textNode.fontSize() * absScale.x,width: textNode.width() * absScale.x,x: textNode.x() * absScale.x,y: textNode.y() * absScale.y,scaleX: 1,scaleY: 1
                        });
                      }
                    }
                  });

                  group.scaleX(1);
                  group.scaleY(1);

                  group.getLayer().batchDraw();
                });
              }}
              onTransform={(event) => {
                const tr = transformerRef.current;
                const anchorName = tr?.getActiveAnchor();
                const widthAnchors = ["middle-right","middle-left"];

                if (!tr) return;

                tr.nodes().forEach((group) => {
                  const children = group.getChildren();

                  children.forEach((node) => {
                    if (node.className === "Text") {
                      const textNode = node;
                      const absScale = textNode.getAbsoluteScale();

                      if (widthAnchors.includes(anchorName)) {
                        textNode.setAttrs({
                          width: textNode.width() * absScale.x,scaleY: 1
                        });
                      }
                    }
                  });

                  if (widthAnchors.includes(anchorName)) {
                    group.scaleX(1);
                    group.scaleY(1);
                  }
                });
              }}