如何将 konvaJS 中的文本值拉伸到一定的宽度和高度?
How to stretch text value in konvaJS to certain width and height?
在 KonvaJS 文本对象中有一个 属性 fontSize 就像 fontSize: 30
但我需要拉伸文字根据我给它的宽度和高度。
这是我写的:
var textX = new Konva.Text({
text: 'X',
align: 'center',
x: 60,
y: 60,
width: 60,
height: 40
});
为了让代码正常工作,您有什么建议?
文本字体可能不会逐渐缩放以完全适合所需的宽度,但您可以接近。
- 创建内存中 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: <input id=myslider type=range><br>
<canvas id="canvas" width=300 height=256></canvas>
在 KonvaJS 文本对象中有一个 属性 fontSize 就像 fontSize: 30
但我需要拉伸文字根据我给它的宽度和高度。
这是我写的:
var textX = new Konva.Text({
text: 'X',
align: 'center',
x: 60,
y: 60,
width: 60,
height: 40
});
为了让代码正常工作,您有什么建议?
文本字体可能不会逐渐缩放以完全适合所需的宽度,但您可以接近。
- 创建内存中 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: <input id=myslider type=range><br>
<canvas id="canvas" width=300 height=256></canvas>