Question

在KonvaJS文本对象中有一个属性 fontSize ，如fontSize: 30，但我需要根据我给它的宽度和高度来拉伸文本。< / p>

这是我写的：

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

您建议让代码有效吗？

Answer 1

文字字体可能不会递增缩放以完全符合所需的宽度，但您可以接近。

创建内存中的画布元素
在某个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>

如何将konvaJS中的文本值拉伸到一定的宽度和高度？

1 个答案: