jTopo實現文本換行


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;
}
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM