-
Notifications
You must be signed in to change notification settings - Fork 29
/
jTOPO 换行demo.html
70 lines (60 loc) · 2.25 KB
/
jTOPO 换行demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>JTOPO文字换行demo</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
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;
for(var j= 0;j<textArray.length;j++){
var words = textArray[j];
this.fillText(words,-(maxWidth/2),y-textArray.length*lineHeight/2);
y+= lineHeight;
}
};
JTopo.Node.prototype.paintText = function(a){
var b = this.text;
if (null != b && "" != b) {
a.beginPath(),
a.font = this.font;
var c = a.measureText(b).width,
d = a.measureText("田").width;
a.fillStyle = "rgba(" + this.fontColor + ", " + this.alpha + ")";
var e = this.getTextPostion(this.textPosition, c, d);
a.wrapText(b, e.x, e.y),
a.closePath()
}
}
var canvas = document.getElementById('canvas'); //舞台
var stage = new JTopo.Stage(canvas);//场景
//显示工具
var scene = new JTopo.Scene(stage);
var node = new JTopo.Node("Hello");
node.textPosition ="Middle_Center";
node.setBound(10, 10,200,200);
node.fontColor="0,0,0"
node.text="这是测试换行的\n这是测试换行第二行的再加\n一行再加一行/n再加一行再加一行再加一行"
scene.add(node);
});
</script>
</head>
<body>
<canvas width="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
</canvas>
</body>
</html>