源码来自 jtopo交流群(171820448) 中的大神:我不是作者只是咖啡爱好者(616487222)、原博客名:dark
// 在jtopo 生成前,粘贴以下代码
CanvasRenderingContext2D.prototype.wrapText = function(str,x,y){
var textArray = str.split('\n');
if(textArray==undefined||textArray==null)return false;
var rowCnt = textArray.length;
var i = 0,imax = rowCnt,maxLength = 0;maxText = textArray[0];
for(;i<imax;i++){
var nowText = textArray[i],textLength = nowText.length;
if(textLength >=maxLength){
maxLength = textLength;
maxText = nowText;
}
}
var maxWidth = this.measureText(maxText).width;
var lineHeight = this.measureText("元").width;
x-= lineHeight*2;
for(var j= 0;j<textArray.length;j++){
var words = textArray[j];
this.fillText(words,-(maxWidth/2),y-textArray.length*lineHeight/100);
y+= lineHeight;
}
};
// 使用方式
var node = new JTopo.Node(data[i].name+"\n"+data[i].xinxi); // 创建一个节点
node.paintText = function(a){
a.beginPath(),
a.font = this.font,
a.wrapText(this.text,this.height/2,this.height);
a.closePath()
};
最近发现大神张鑫旭对 canvas 文本操作提供的API,值得推荐:
canvas文本绘制自动换行、字间距、竖排等实现