jtopo节点文字换行

源码来自 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文本绘制自动换行、字间距、竖排等实现

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值