如何将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

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

• 创建一个内存画布元素，
• 以某个pxtestFontsize测量您的文本（几乎任何合理的测试尺寸都可以），
• 所需的字体大小是：testFontsize*desiredWidth/measuredWidth,
• 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>