jTopo使用下来还是一个比较简陋的的拓扑图框架,好多功能实现不了,前端小白做出来的效果也不是太美观
下面介绍一个jTopo文本换行的解决方式,以节点的名字为例
在scene.add(node);之前加入以下代码,文本以‘-’作为换行的标识符就可以了
node.paintText = function(a){ a.beginPath(), a.font = this.font, a.wrapText(this.text,this.height/2,this.height); a.closePath() } CanvasRenderingContext2D.prototype.wrapText = function(str,x,y){ var textArray =str.split('-');//文本以‘-’作为换行的标识符 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,x,y); this.fillStyle = '#eee';//设置字体颜色 this.font="12px Verdana";//设置字体大小 y+= lineHeight; } };