Resize Text within Group

Question

I have a case where I would like to resize the Group using middle-right and middle-left anchors but the result is not what we are actually expecting. If the group is resized using middle-right and middle-left, it should adjust the text's width and keep the original ratio.

Here's is my sandbox link for our issue: https://codesandbox.io/s/condescending-surf-2qn8f

score 0 · Answer 1 · answered Jul 15 '21 at 07:13

Added the following lines of code and that resolved the issue. Cheers to @lavrton and @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,
                          x: textNode.x() * absScale.x,
                          y: textNode.y() * absScale.y,
                          scaleX: 1,
                          scaleY: 1
                        });
                      }
                    }
                  });

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

Resize Text within Group

1 Answers1