canvas的文字自动换行

canvas的文字是不能自动换行的,这里我做了一个自己计算文字宽度并收动换行的方法,调用者也就可以认为是自动换行了;


var Canvas = require('canvas');




function text2png(text,callback){
        if(typeof text != 'string' || text.trim().length === 0){
                var err=new Error('text is not correct:<'+text+'>');
                return callback(err);
        }
        text=text.trim().replace(/\t/g,' ');
        var linechnum=40;
        var lineheight=22;
        var lines=Math.floor(getTrueLength(text) / linechnum) + 1;


        function getTrueLength(str){
                var len = str.length, truelen = 0;
                for(var x = 0; x < len; x++){
                        if(str.charCodeAt(x) > 128){
                                truelen += 2;
                        }else{
                                truelen += 1;
                        }
                }
                return truelen;
        }




        function getLineString(str, offset){
                var len = str.length , nlen = 0;
                var x = offset;
                for(; x < len; x++){
                        if(str.charCodeAt(x) > 128){
                                if(nlen + 2 <= linechnum){
                                        nlen += 2;
                                }else{
                                        break;
                                }
                        }else{
                                if(nlen + 1 <= linechnum){
                                        nlen ++;
                                }else{
                                        break;
                                }
                        }
                }
                return str.substring(offset,x);
        }


        var cnswid = 400;var cnsheg=lineheight * (lines+1);
        var canvas = new Canvas(cnswid,cnsheg);
        var ctx = canvas.getContext('2d');
        var fs = require('fs');


        ctx.clearRect(0, 0, cnswid,cnsheg);
        ctx.font = '16px "Microsoft YaHei", Impact, serif';
        ctx.fillStyle = "#000";
        ctx.strokeStyle="#0f0";
        ctx.strokeRect(5,5,cnswid-10,cnsheg-10);


        for(var n=0,off=0;n<lines;n++){
                var lnstr=getLineString(text,off);
                off+=lnstr.length;
                //console.log(lnstr);
                ctx.fillText(lnstr, 10, 25+n*lineheight);
        }
        var tmpfilename=__dirname + '/text.png';
        var out = fs.createWriteStream(tmpfilename)
          , stream = canvas.createPNGStream();


        stream.on('data', function(chunk){
          out.write(chunk);
        });
        stream.on('end', function(){
          callback(null,{filename:tmpfilename});
        });


}

//测试
text2png('j一个可以很长很长的字符串rr',function(err,info){
if(err)console.log(err);
else console.log(info);
});




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值