2

在 KonvaJS Text Object 中有一个类似fontSizefontSize: 30的属性，但我需要根据我给它的宽度和高度来拉伸文本。

这是我写的：

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

你有什么建议让代码工作？

4

1 回答 1

6

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

  • 创建一个内存中的画布元素，
  • 以特定的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>

于 2016-08-22T19:44:12.157 回答