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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="450">
<style type="text/css">
text { font-family:sans-serif; font-size:11px; text-anchor:middle; text-align:center }
.title tspan { font-weight: bold }
.pos { opacity: 0.3 }
.started { fill:#C80 }
</style>
<script type="text/javascript" xlink:href="../inkweb.js" />
<script type="text/javascript" xlink:href="inkweb-debug.js" />
<rect x="0%" y="0%" width="100%" height="100%" style="fill:#EEE; stroke:#999; stroke-width:4px" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<text id="test-1" x="125" y="26" class="title">
<tspan>Test 1</tspan> - from left to right </text>
<text class="pos" x="80" y="80"> Start </text>
<circle id="t1-start" cx="80" cy="50" r="20" fill="#C00" opacity="0.2" />
<text class="pos" x="170" y="80"> End </text>
<circle id="t1-end" cx="170" cy="50" r="20" fill="#C00" opacity="0.2" />
<!-- The element to move -->
<circle id="t1-elem" cx="80" cy="50" r="20" fill="#C00" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<text id="test-2" x="325" y="26" class="title">
<tspan>Test 2</tspan> - from right to left</text>
<text class="pos" x="370" y="80"> Start </text>
<circle id="t2-start" cx="370" cy="50" r="20" fill="#0A0" opacity="0.2" />
<text class="pos" x="280" y="80"> End </text>
<circle id="t2-end" cx="280" cy="50" r="20" fill="#0A0" opacity="0.2" />
<!-- The element to move -->
<circle id="t2-elem" cx="370" cy="50" r="20" fill="#0A0" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<text id="test-3" x="125" y="120" class="title">
<tspan>Test 3</tspan> - pre-translated </text>
<text class="pos" x="80" y="190"> Start </text>
<path id="t3-start" fill="#C00" opacity="0.2" transform="translate(30,10)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<text class="pos" x="170" y="190"> End </text>
<path id="t3-end" fill="#C00" opacity="0.2" transform="translate(120,10)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- The element to move -->
<path id="t3-elem" fill="#C00" transform="translate(30,10)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<text id="test-4" x="350" y="120" class="title">
<tspan>Test 4</tspan> - pre-translated and scaled </text>
<text class="pos" x="300" y="190"> Start </text>
<path id="t4-start" fill="#C00" opacity="0.2"
transform="translate(235,-45) scale(1.4)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<text class="pos" x="400" y="190"> End </text>
<path id="t4-end" fill="#C00" opacity="0.2"
transform="translate(335,-45) scale(1.4)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- The element to move -->
<path id="t4-elem" fill="#C00"
transform="translate(235,-45) scale(1.4)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<text id="test-5" x="600" y="120" class="title">
<tspan>Test 5</tspan> - pre-translated and rotated </text>
<text class="pos" x="550" y="190"> Start </text>
<path id="t5-start" fill="#C00" opacity="0.2"
transform="translate(500,0) rotate(-15 90 140)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<text class="pos" x="650" y="190"> End </text>
<path id="t5-end" fill="#C00" opacity="0.2"
transform="translate(600,0) rotate(-15 90 140)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- The element to move -->
<path id="t5-elem" fill="#C00"
transform="translate(500,0) rotate(-15 90 140)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<text id="test-6" x="125" y="220" class="title">
<tspan>Test 6</tspan> - with a transformation matrix </text>
<text class="pos" x="80" y="290"> Start </text>
<path id="t6-start" fill="#C00" opacity="0.2"
transform="matrix(1.2 0 -0.5 1.2 95 80)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<text class="pos" x="170" y="290"> End </text>
<path id="t6-end" fill="#C00" opacity="0.2"
transform="matrix(1.2 0 -0.5 1.2 185 80)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- The element to move -->
<path id="t6-elem" fill="#C00"
transform="matrix(1.2 0 -0.5 1.2 95 80)"
d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<script type="text/javascript">
var titles = document.getElementsByClassName("title")
for ( var title,i=0; title=titles[i]; i++ ) {
title.className.baseVal += " started";
testeNum = title.id.replace( /^.*-/, "" );
var el = document.getElementById( "t"+testeNum+"-elem" );
var start = document.getElementById( "t"+testeNum+"-start" ).getBBox();
var end = document.getElementById( "t"+testeNum+"-end" ).getBBox();
InkWeb.moveElTo( { el:el, x:end.x, y:end.y } );
}
function testLog() {
try{ foo.lalala() }
catch(e){ InkWeb.log(e, "foo.lalala() is wrong?") }
InkWeb.log("This is a sequence log.");
InkWeb.log("warn", "Warning! Warning!!!");
}
setTimeout("testLog()", 2000);
</script>
</svg>
|
