【避坑指“难”】canvas绘制时,文字过长自动换行

  getTextCanvas(ctx,content,drawX, drawY, lineHeight, lineMaxWidth, lineNum){
    
    
    var drawTxt = ''; // 当前绘制的内容
    var drawLine = 1; // 第几行开始绘制
    var drawIndex = 0; // 当前绘制内容的索引
    // 判断内容是否可以一行绘制完毕
    if(ctx.measureText(content).width <= lineMaxWidth) {
    
    
        ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
    } else {
    
    
        for (var i = 0; i < content.length; i++) {
    
    
                drawTxt += content[i];
                if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
    
    
                    if (drawLine >= lineNum) {
    
    
                        ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                        break;
                    } else {
    
    
                        ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                        drawIndex = i + 1;
                        drawLine += 1;
                        drawY += lineHeight;
                        drawTxt = '';
                    }
                } else {
    
    
                    // 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidth
                    if (i === content.length - 1) {
    
    
                        ctx.fillText(content.substring(drawIndex), drawX, drawY);
                    }
                }
            }
    }
  },

猜你喜欢

转载自blog.csdn.net/weixin_42224055/article/details/120136496