konva文字大小自适应容器宽度

简单记录konva字体缩放的使用方法

//Konva使用的基本案例
//第一步：创建舞台
var stage = new Konva.Stage({
    container: 'container',     //需要存放舞台的Dom容器
    width: window.innerWidth,   //设置全屏
    height: window.innerHeight
    
//第二步：创建层
var layer = new Konva.Layer();  //创建一个层
stage.add(layer);               //把层添加到舞台
});

//第三步： 创建矩形
var rect = new Konva.Rect({     //创建一个矩形
    x: 100,                     //矩形的x坐标，相对其父容器的坐标
    y: 100,
    width: 100,                 //矩形的宽度
    height: 100,                //矩形高度
    fill: 'gold',               //矩形填充的颜色
    stroke: 'navy',             //矩形描边的颜色
    strokeWidth: 4,             //填充宽度
    opactity: .2,               //矩形的透明度
    scale: 1.2,                 //矩形的缩放 1：原来大小
    rotation: 30,               //旋转的角度，是deg不是弧度。
    cornerRadius: 10,           //圆角的大小（像素）
    id: 'rect1',                //id属性，类似dom的id属性
    name: 'rect',
    draggable: true             //是否可以进行拖拽
});

 var text = new Konva.Text({
        x: 22,
        y: 15,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green'
      });
           

以下是文字自适应容器宽度方法

// 创建这个容器用于包裹文字
var rect = new Konva.Rect({     //创建一个矩形
    width: 100,                 //矩形的宽度
    height: 20,                //矩形高度
});
           

// 创建文字
//此处的fontSize是多少，那么文字所占的高度就是多少，默认为12
var defaultText = '床前明月光疑似地上霜举头望明月低头思故乡'
 var text = new Konva.Text({
        text:defaultText,
        //fontSize: 12
      });
// 此时假设text的长度已经超过上述rect的宽度100
// 因此我们要把文字的字体缩小
var fontS = getFontSize(defaultText);

// 最后设置大小即可，setFontSize在text对象中找不到，但是可在原型链中找到
// ps.找得非常非常辛苦
text.setFontSize(fontS);
// 另外还要注意一点的就是可能text对象的attrs属性不会改变，此语句根据实际情况自取吧
text.attrs.text = defaultText;

// 定义获取字体大小的方法
var getFontSize = function(text){
	// 新创建一个临时Text对象，但不做渲染
	var defaultSize = 20;
	var tempText = new Konva.Text({
        fontSize: defaultSize , // 这里设置能获取的最大的字体size
        text: text
      });
    rectW = rect.width(); // 包裹文字的矩形的宽度
    textW = tempText.width(); // 临时文字对象
    textF = tempText.fontSize(); // 临时文字大小
    // 例如：textW = 150  ,  rectW = 100 此时文字超出了
    // 系数= textW/rectW = 1.5
    // 用fontSize÷系数 即为改变后文字的大小
    var fontSize = textF  / (textW  / rectW);
    
    // 限制最大字体为defaultSize
    fontSize= fontSize> defaultSize ? defaultSize : fontSize; 
	
	// 释放
    rackText = null;

	return fontSize;
}
           

注：本文章是根据本人实际开发中遇到问题总结出来的，每个人在实际中所遇到的问题都不一样，本文只作参考。