问题描述
我有一个案例,我想使用中右和中左锚点调整组的大小,但结果不是我们实际期望的。如果使用中右和中左调整组大小,则应调整文本的宽度并保持原始比例。
这是我的问题的沙箱链接: 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);
}
});
}}