Konva js Text Convert scale to font size

Question

I want to achieve the same result as scaling text with a transformer but changing fontSize not scale.

That is when dragging the transformer anchors change font-size, width, height .etc that my text looks like it's scaled.

Can somebody help me??

Answer 1

I think maybe this is about keeping text looking good when scaled. The default transformer allows the user to stretch the width and height separately thereby creating ugly looking text.

In order to maintain decent looking text with transformers, we need to make it so the transformer will respect the proportions of the text shape.

To do this, switch off the width and height drag-anchors with the enabledAnchors property of the transformer, and set

transformer.keepRatio(true);

Try it in the snippet below.

[EDIT] I modified the snippet to support the original question's aim to replace the transformed text with 100% sized text that matches what the transformer produces. See the simpleText.on('transformend'...) listener.

Note that what you see when scaling a font via the transformer v's replacing with a new calculated font size may not be absolutely identical due to internal font hinting that might alter, for example, inter-character spacing above / below specific font sizes.

My money is still on just making the transformer keep the ratio as this is the most robust solution and it is pretty much free. But the snippet includes a way to achieve what you originally stated as the intention.

 // Set up the canvas and shapes let stage = new Konva.Stage({container: 'container1', width: $('#container1').width(), height: $('#container1').height()}); let layer = new Konva.Layer({draggable: false}); stage.add(layer); // Add a transformer - note we use enabledAnchors to ensure no height0onlly or width-only anchors are used as these do not respect the ratio. let transFormer1 = new Konva.Transformer({ enabledAnchors: [ 'top-left', 'top-right', 'bottom-left', 'bottom-right', ] }); transFormer1.keepRatio(true); // ** Tell the transformer to maintain aspect ratio ** layer.add(transFormer1); var simpleText = new Konva.Text({ x: 40, y: 65, text: 'Bart, with 10,000 dollars we`d be millionaires!', fontSize: 36, fontFamily: 'Calibri', fill: 'cyan', }); // When the transform ends we set the new font size and reset the scale to 1. simpleText.on('transformend', function () { console.log('transform end - before reset font size = ' + this.fontSize() + ' at scale ' + this.scaleX()); this.fontSize(this.fontSize() * this.scaleX()); this.scale({x: 1, y: 1}); layer.batchDraw(); console.log('transform end - after reset font size = ' + this.fontSize() + ' at scale ' + this.scaleX()); }); layer.add(simpleText); transFormer1.nodes([simpleText]) stage.draw();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/konva@7.1.1/konva.min.js"></script> <p>Resize the text - note the aspect ratio is retained. </p> <div id='container1' style="height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>