Как растянуть текстовое значение в konvaJS до определенной ширины и высоты?

Question

В текстовом объекте KonvaJS есть свойство fontSize как fontSize: 30, но мне нужно растянуть текст по ширине и высоте, которые я им даю.

Вот что я написал:

var textX = new Konva.Text({ 
 
      text: 'X', 
 
      align: 'center', 
 
      x: 60, 
 
      y: 60, 
 
      width: 60, 
 
      height: 40 
 
     });

Что вы предлагаете, чтобы позволить код работать?

Answer 1

Текстовые шрифты не могут быть пошагово, чтобы точно соответствовать требуемой ширине, но вы можете приблизиться.

• Создание холста элемент в памяти,
• Измерьте свой текст на определенном px testFontsize (почти любой разумный размер тест будет делать),
• Необходимый размер шрифта: testFontsize*desiredWidth/measuredWidth,
• Set необходимый размер шрифта px в вашем Konva.Text.

Примечания: Некоторые шрифты не масштабируются с десятичной точностью, так что вы, возможно, придется .toFixed(0) в результате масштабируется размер шрифта. Некоторые шрифты могут вообще не масштабироваться, и вы получите ближайший доступный размер шрифта, который может не заполнить нужную ширину.

Пример кода:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// define the desired text, fontsize and width 
 
var text='Scale Me'; 
 
var fontface='verdana'; 
 
var desiredWidth=60; 
 

 
$myslider=$('#myslider'); 
 
$myslider.attr({min:30,max:200}).val(desiredWidth); 
 
$myslider.on('input change',function(){ 
 
    desiredWidth=parseInt($(this).val()); 
 
    ctx.clearRect(0,0,cw,ch); 
 
    draw(text,fontface,desiredWidth) 
 
}); 
 

 
draw(text,fontface,desiredWidth); 
 

 
function draw(text,fontface,desiredWidth){ 
 
    // calc the scaled fontsize needed to fill the desired width 
 
    var scaledSize=scaledFontsize(text,fontface,desiredWidth); 
 
    // Demo: draw the text at the scaled fontsize 
 
    ctx.font=scaledSize+'px '+fontface; 
 
    ctx.textAlign='left'; 
 
    ctx.textBaseline='middle'; 
 
    ctx.strokeRect(0,0,desiredWidth,100); 
 
    ctx.fillText(text,0,50); 
 
    ctx.font='14px verdana'; 
 
    ctx.fillText(scaledSize+'px '+fontface+' fits '+desiredWidth+'px width',10,125); 
 
} 
 

 
function scaledFontsize(text,fontface,desiredWidth){ 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    var testFontsize=18; 
 
    cctx.font=testFontsize+'px '+fontface; 
 
    var textWidth=cctx.measureText(text).width; 
 
    return((testFontsize*desiredWidth/textWidth)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
Desired Width:&nbsp<input id=myslider type=range><br> 
 
<canvas id="canvas" width=300 height=256></canvas>