CODEWITHSUNDEEP
konvajsreact-konva
coder5666666666
coder5666666666

Reputation: 37

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

I have the following code below where once the text has been transformed on the screen the font size has gotten bigger but when i log fontsize it is the exact same as before.Is there anyway to get the updated fontsize as when I reload the page after the value have been saved to the db it is the previous font size.

<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})
                }}
              />

Upvotes: 1

Views: 1118

Answers (1)

Vanquished Wombat
Vanquished Wombat

Reputation: 9525

When you scale a shape its dimensions do not change. Internally, what happens is that a transformation matrix is applied that changes the scale at which the shape is drawn, but none of the shape attributes other than scaleX() and scaleY() are changed.

A common question concerns how to get the size of the shape on the stage. The answer to that is

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

And the same approach would be taken for the font size:

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

Upvotes: 4

Related Questions