有没有办法在转换结束时使用 react konva 来缩放文本字体大小

Question

我在下面的代码中，一旦文本在屏幕上被转换，字体大小就会变大，但是当我记录 fontsize 时，它与 before.Is 完全相同，无论如何都可以获得更新的 fontsize当我将值保存到数据库后重新加载页面时，它是以前的字体大小。

<Text
                name={eid}
                zIndex={i}
                x={x}
                y={y}
                text={text}
                fontSize={fontSize}
                fontFamily={fontFamily}
                fill={fill}
                width={width}
                height={height}
                align={align}
                draggable={draggable}
                onDragMove={(e) => {
                  let transformedData = {
                    'x' : e.target.x(),
                    'y' : e.target.y(),
                  }
                  socket.emit('element:update',{data:transformedData})
                }}
                onTransformEnd={(e) => {
                 
                  let text = e.target

                  let transformedData = {
                    'x': text.x(),
                    'y':  text.y(),
                    'rotation': text.rotation(),
                    'width': text.width() * text.scaleX(),
                    'height': text.height() * text.scaleY(),
                    'fontSize': text.fontSize() //this font size never changes ...not sure why
                  }

                 
                  socket.emit('element:updatedata'{data:tranformedData})
                }}
              />

Answer 1

缩放形状时，其尺寸不会改变。在内部，发生的事情是应用了一个变换矩阵来改变绘制形状的比例，但是 none 除了 scaleX() 和 scaleY() 之外的形状属性被改变了。

一个常见的问题是如何获取舞台上形状的大小。答案是

shapeSize.width = shape.width() * shape.scaleX(); shapeSize.height= shape.height() * shape.scaleY();

字体大小也采用相同的方法：

shapeSize.fontSize = textShape.fontSize () * textShape.scaleY();

有没有办法在转换结束时使用 react konva 来缩放文本字体大小

Is there a way to scale the text fontsize using react konva on transform end

konvajs

react-konva