Konva js 文本将比例转换为字体大小

Question

我想获得与使用转换器缩放文本相同的结果，但更改 fontSize 而不是缩放。

那是当拖动变换器锚点更改字体大小、宽度、高度等时，我的文本看起来像被缩放了。

有人可以帮帮我吗？？

Answer 1

我想这可能是为了让文本在缩放时看起来不错。默认转换器允许用户分别拉伸宽度和高度，从而创建难看的文本。

为了使用变形金刚保持文本的美观，我们需要使变形金刚符合文本形状的比例。

为此，请使用转换器的 enabledAnchors 属性关闭宽度和高度 drag-anchors，然后设置

transformer.keepRatio(true);

在下面的代码片段中试试。

[编辑] 我修改了代码片段以支持原始问题的目标，即用与转换器生成的内容匹配的 100% 大小的文本替换转换后的文本。请参阅 simpleText.on('transformend'...) 侦听器。

请注意，由于内部字体提示可能会改变，您在通过转换器 v 替换为新计算的字体大小来缩放字体时看到的内容可能绝对不相同，因为例如，inter-character 高于/低于特定字体大小的间距。

我的钱仍然花在让变压器保持比率上，因为这是最可靠的解决方案，而且几乎是免费的。但该片段包含一种实现您最初陈述的意图的方法。

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

Konva js 文本将比例转换为字体大小

Konva js Text Convert scale to font size

javascript

konvajs