javascript - 如何将 konvaJS 中的文本值拉伸(stretch)到一定的宽度和高度？

Question

在 KonvaJS 文本对象中有一个属性 fontSize 像 fontSize: 30 但我需要根据我的宽度和高度拉伸(stretch)文本给它。

这是我写的:

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

为了让代码正常工作，您有什么建议？

Answer 1

文本字体可能不会逐渐缩放以完全适合所需的宽度，但您可以接近。

• 创建一个内存中的 Canvas 元素，
• 以特定的 px testFontsize 测量您的文本(几乎任何合理的测试大小都可以)，
• 所需字体大小为:testFontsize*desiredWidth/measuredWidth,
• 在 Konva.Text 中设置所需的 px 字体大小。

注意:某些字体不按小数精度缩放，因此您可能必须 .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>