| 2150 |
mathias |
1 |
<html>
|
|
|
2 |
<head>
|
|
|
3 |
<title>Dojo Unified 2D Graphics</title>
|
|
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
5 |
<style type="text/css">
|
|
|
6 |
@import "../../../dojo/resources/dojo.css";
|
|
|
7 |
@import "../../../dijit/tests/css/dijitTests.css";
|
|
|
8 |
</style>
|
|
|
9 |
<!--
|
|
|
10 |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
|
|
|
11 |
<script type="text/javascript" src="Silverlight.js"></script>
|
|
|
12 |
-->
|
|
|
13 |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, gfxRenderer: 'svg,silverlight,vml'"></script>
|
|
|
14 |
<!--<script type="text/javascript" src="../_base.js"></script>-->
|
|
|
15 |
<!--<script type="text/javascript" src="../path.js"></script>-->
|
|
|
16 |
<!--<script type="text/javascript" src="../vml.js"></script>-->
|
|
|
17 |
<!--<script type="text/javascript" src="../svg.js"></script>-->
|
|
|
18 |
<!--<script type="text/javascript" src="../silverlight.js"></script>-->
|
|
|
19 |
<script type="text/javascript">
|
|
|
20 |
|
|
|
21 |
dojo.require("dojox.gfx");
|
|
|
22 |
|
|
|
23 |
var gTestContainer = null;
|
|
|
24 |
var gTests = {};
|
|
|
25 |
|
|
|
26 |
function isEqual(foo, bar, prefix)
|
|
|
27 |
{
|
|
|
28 |
var flag = true;
|
|
|
29 |
if( foo != bar ) {
|
|
|
30 |
console.debug(prefix+":"+foo + "!=" + bar + " try dig into it" );
|
|
|
31 |
if( foo instanceof Array ) {
|
|
|
32 |
for( var i = 0; i< foo.length; i++ ) {
|
|
|
33 |
flag = isEqual(foo[i], bar[i], prefix+"["+i+"]") && flag;
|
|
|
34 |
}
|
|
|
35 |
flag = false;
|
|
|
36 |
} else {
|
|
|
37 |
for(var x in foo) {
|
|
|
38 |
if(bar[x] != undefined ) {
|
|
|
39 |
flag = isEqual(foo[x], bar[x], prefix+"."+x) && flag;
|
|
|
40 |
} else {
|
|
|
41 |
console.debug(prefix+":"+ x + " is undefined in bar" );
|
|
|
42 |
flag = false;
|
|
|
43 |
}
|
|
|
44 |
}
|
|
|
45 |
}
|
|
|
46 |
}
|
|
|
47 |
return flag;
|
|
|
48 |
}
|
|
|
49 |
|
|
|
50 |
|
|
|
51 |
function getTestSurface(testName, testDescription, width, height)
|
|
|
52 |
{
|
|
|
53 |
width = width ? width : 300;
|
|
|
54 |
height = height ? height : 300;
|
|
|
55 |
|
|
|
56 |
// Create a DOM node for the surface
|
|
|
57 |
var testRow = document.createElement('tr');
|
|
|
58 |
var testCell = document.createElement('td');
|
|
|
59 |
var testHolder = document.createElement('div');
|
|
|
60 |
testHolder.id = testName + '_holder';
|
|
|
61 |
testHolder.style.width = width;
|
|
|
62 |
testHolder.style.height = height;
|
|
|
63 |
|
|
|
64 |
testCell.appendChild(testHolder);
|
|
|
65 |
testRow.appendChild(testCell);
|
|
|
66 |
gTestContainer.appendChild(testRow);
|
|
|
67 |
|
|
|
68 |
var descRow = document.createElement('tr');
|
|
|
69 |
var desc = document.createElement('td');
|
|
|
70 |
desc.innerHTML = testDescription;
|
|
|
71 |
descRow.appendChild(desc);
|
|
|
72 |
gTestContainer.appendChild(descRow);
|
|
|
73 |
|
|
|
74 |
return dojox.gfx.createSurface(testHolder, width, height);
|
|
|
75 |
}
|
|
|
76 |
|
|
|
77 |
function addTest(testName, fn)
|
|
|
78 |
{
|
|
|
79 |
gTests[testName] = fn;
|
|
|
80 |
}
|
|
|
81 |
|
|
|
82 |
function runTest_nodebug(testName)
|
|
|
83 |
{
|
|
|
84 |
try {
|
|
|
85 |
var t = gTests[testName];
|
|
|
86 |
if (!t) {
|
|
|
87 |
return 'no test named ' + t;
|
|
|
88 |
}
|
|
|
89 |
t(testName);
|
|
|
90 |
return null; // the success condition
|
|
|
91 |
} catch (e) {
|
|
|
92 |
return e.message;
|
|
|
93 |
}
|
|
|
94 |
}
|
|
|
95 |
|
|
|
96 |
function runTest_debug(testName)
|
|
|
97 |
{
|
|
|
98 |
var t = gTests[testName];
|
|
|
99 |
if (!t) {
|
|
|
100 |
return 'no test named ' + t;
|
|
|
101 |
}
|
|
|
102 |
t(testName);
|
|
|
103 |
return null; // the success condition
|
|
|
104 |
}
|
|
|
105 |
|
|
|
106 |
var runTest = djConfig.isDebug ? runTest_debug : runTest_nodebug;
|
|
|
107 |
|
|
|
108 |
dojo.addOnLoad(function()
|
|
|
109 |
{
|
|
|
110 |
gTestContainer = dojo.byId('testcontainer');
|
|
|
111 |
var rect = { x: 0, y: 0, width: 100, height: 100 };
|
|
|
112 |
|
|
|
113 |
addTest('rect', function(testName){
|
|
|
114 |
var surface = getTestSurface(testName, 'translucent rect with rounded stroke');
|
|
|
115 |
var red_rect = surface.createRect(rect);
|
|
|
116 |
red_rect.setFill([255, 0, 0, 0.5]);
|
|
|
117 |
red_rect.setStroke({color: "blue", width: 10, join: "round" });
|
|
|
118 |
red_rect.setTransform({dx: 100, dy: 100});
|
|
|
119 |
//dojo.connect(red_rect.getNode(), "onclick", function(){ alert("red"); });
|
|
|
120 |
red_rect.connect("onclick", function(){ alert("red"); });
|
|
|
121 |
});
|
|
|
122 |
|
|
|
123 |
addTest('straight_rect', function(testName){
|
|
|
124 |
var surface = getTestSurface(testName, 'translucent rect with no stroke');
|
|
|
125 |
var blue_rect = surface.createRect(rect).setFill([0, 255, 0, 0.5]).setTransform({ dx: 100, dy: 100 });
|
|
|
126 |
//dojo.connect( blue_rect.getNode(), "onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
|
|
|
127 |
blue_rect.connect("onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); });
|
|
|
128 |
});
|
|
|
129 |
|
|
|
130 |
addTest('rotated_rect', function(testName){
|
|
|
131 |
var surface = getTestSurface(testName, '30g CCW blue translucent rounded rect');
|
|
|
132 |
console.debug('rotated_rect');
|
|
|
133 |
// anonymous 30 degree CCW rotated green rectangle
|
|
|
134 |
surface.createRect({r: 20})
|
|
|
135 |
.setFill([0, 0, 255, 0.5])
|
|
|
136 |
// rotate it around its center and move to (100, 100)
|
|
|
137 |
.setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 0)])
|
|
|
138 |
;
|
|
|
139 |
});
|
|
|
140 |
|
|
|
141 |
addTest('skew_rect', function(testName){
|
|
|
142 |
var surface = getTestSurface(testName, 'skewed rects' );
|
|
|
143 |
// anonymous red rectangle
|
|
|
144 |
surface.createRect(rect).setFill(new dojo.Color([255, 0, 0, 0.5]))
|
|
|
145 |
// skew it around LB point -30d, rotate it around LB point 30d, and move it to (100, 100)
|
|
|
146 |
.setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
|
|
|
147 |
// anonymous blue rectangle
|
|
|
148 |
surface.createRect(rect).setFill(new dojo.Color([0, 0, 255, 0.5]))
|
|
|
149 |
// skew it around LB point -30d, and move it to (100, 100)
|
|
|
150 |
.setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]);
|
|
|
151 |
// anonymous yellow rectangle
|
|
|
152 |
surface.createRect(rect).setFill(new dojo.Color([255, 255, 0, 0.25]))
|
|
|
153 |
// move it to (100, 100)
|
|
|
154 |
.setTransform(dojox.gfx.matrix.translate(100, 100));
|
|
|
155 |
});
|
|
|
156 |
|
|
|
157 |
addTest('matrix_rect', function(testName){
|
|
|
158 |
var surface = getTestSurface(testName, 'all matrix operations, check debug output for more details');
|
|
|
159 |
|
|
|
160 |
var group = surface.createGroup();
|
|
|
161 |
|
|
|
162 |
var blue_rect = group.createRect(rect).setFill([0, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.identity);
|
|
|
163 |
console.debug( "blue_rect: rect with identity" );
|
|
|
164 |
|
|
|
165 |
group.createRect(rect).setFill([0, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.translate(30, 40));
|
|
|
166 |
console.debug( "lime_rect: translate(30,40) " );
|
|
|
167 |
|
|
|
168 |
group.createRect(rect).setFill([255, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.rotateg(-30));
|
|
|
169 |
console.debug( "red_rect: rotate 30 degree counterclockwise " );
|
|
|
170 |
|
|
|
171 |
group.createRect(rect).setFill([0, 255, 255, 0.5])
|
|
|
172 |
.applyTransform(dojox.gfx.matrix.scale({x:1.5, y:0.5}))
|
|
|
173 |
.applyTransform(dojox.gfx.matrix.translate(-40, 220))
|
|
|
174 |
;
|
|
|
175 |
console.debug( "lightblue_rect: scale(1.5, 0.5)" );
|
|
|
176 |
|
|
|
177 |
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.flipX);
|
|
|
178 |
console.debug( "pink_rect: flipX" );
|
|
|
179 |
|
|
|
180 |
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.flipY);
|
|
|
181 |
console.debug( "yellow_rect: flipY" );
|
|
|
182 |
|
|
|
183 |
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([128, 0, 128, 0.5]).applyTransform(dojox.gfx.matrix.flipXY);
|
|
|
184 |
console.debug( "purple_rect: flipXY" );
|
|
|
185 |
|
|
|
186 |
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 128, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewXg(-15));
|
|
|
187 |
console.debug( "purple_rect: skewXg 15 degree" );
|
|
|
188 |
|
|
|
189 |
group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([0, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewYg(-50));
|
|
|
190 |
console.debug( "black_rect: skewXg 50 degree" );
|
|
|
191 |
|
|
|
192 |
// move
|
|
|
193 |
group
|
|
|
194 |
.setTransform({ xx: 1.5, yy: 0.5, dx: 100, dy: 100 })
|
|
|
195 |
.applyTransform(dojox.gfx.matrix.rotateg(-30))
|
|
|
196 |
;
|
|
|
197 |
});
|
|
|
198 |
|
|
|
199 |
addTest('attach', function(testName){
|
|
|
200 |
var surface = getTestSurface(testName, 'Attach to existed shape');
|
|
|
201 |
var red_rect = surface.createRect(rect)
|
|
|
202 |
.setShape({ width: 75 })
|
|
|
203 |
.setFill([255, 0, 0, 0.5])
|
|
|
204 |
.setStroke({ color: "blue", width: 1 })
|
|
|
205 |
.setTransform({ dx: 50, dy: 50, xx: 1, xy: 0.5, yx: 0.7, yy: 1.1 })
|
|
|
206 |
;
|
|
|
207 |
|
|
|
208 |
console.debug("attaching !");
|
|
|
209 |
// now attach it!
|
|
|
210 |
var ar = dojox.gfx.attachNode(red_rect.rawNode);
|
|
|
211 |
console.assert( ar.rawNode == red_rect.rawNode );
|
|
|
212 |
|
|
|
213 |
// FIXME: more generic method to compare two dictionary?
|
|
|
214 |
console.debug("attach shape: ");
|
|
|
215 |
isEqual(ar.shape, red_rect.shape, "rect.shape");
|
|
|
216 |
console.debug("attach matrix: ");
|
|
|
217 |
isEqual(ar.matrix, red_rect.matrix, "rect.matrix");
|
|
|
218 |
console.debug("attach strokeStyle: ");
|
|
|
219 |
isEqual(ar.strokeStyle, red_rect.strokeStyle, "rect.strokeStyle");
|
|
|
220 |
console.debug("attach fillStyle: ");
|
|
|
221 |
isEqual(ar.fillStyle, red_rect.fillStyle, "rect.fillStyle");
|
|
|
222 |
});
|
|
|
223 |
|
|
|
224 |
// test circle
|
|
|
225 |
addTest('circle', function(testName){
|
|
|
226 |
var surface = getTestSurface(testName, 'translucent green circle');
|
|
|
227 |
var circle = { cx: 130, cy: 130, r: 50 };
|
|
|
228 |
surface.createCircle(circle).setFill([0, 255, 0, 0.5]).setTransform({ dx: 20, dy: 20 });
|
|
|
229 |
});
|
|
|
230 |
|
|
|
231 |
// test line
|
|
|
232 |
addTest('line', function(testName){
|
|
|
233 |
var surface = getTestSurface(testName, 'straight red line');
|
|
|
234 |
var line = { x1: 20, y1: 20, x2: 100, y2: 120 };
|
|
|
235 |
surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1}).setTransform({ dx:70, dy: 100 });
|
|
|
236 |
});
|
|
|
237 |
|
|
|
238 |
// test ellipse
|
|
|
239 |
addTest('ellipse', function(testName){
|
|
|
240 |
var surface = getTestSurface(testName, 'translucent cyan ellipse');
|
|
|
241 |
var ellipse = { cx: 50, cy: 80, rx: 50, ry: 80 };
|
|
|
242 |
surface.createEllipse(ellipse).setFill([0, 255, 255, 0.5]).setTransform({ dx: 30, dy: 70 });
|
|
|
243 |
});
|
|
|
244 |
|
|
|
245 |
// test polyline
|
|
|
246 |
addTest('polyline', function(testName){
|
|
|
247 |
var surface = getTestSurface(testName, 'unfilled open polyline');
|
|
|
248 |
var points = [ {x: 10, y: 20}, {x: 40, y: 70}, {x: 120, y: 50}, {x: 90, y: 90} ];
|
|
|
249 |
surface.createPolyline(points).setFill(null).setStroke({ color: "blue", width: 1 }).setTransform({ dx: 15, dy: 0 });
|
|
|
250 |
});
|
|
|
251 |
|
|
|
252 |
// test polygon
|
|
|
253 |
addTest('polygon', function(testName){
|
|
|
254 |
var surface = getTestSurface(testName, 'filled polygon');
|
|
|
255 |
var points2 = [{x: 100, y: 0}, {x: 200, y: 40}, {x: 180, y: 150}, {x: 60, y: 170}, {x: 20, y: 100}];
|
|
|
256 |
surface.createPolyline(points2).setFill([0, 128, 255, 0.6]).setTransform({dx:30, dy: 20});
|
|
|
257 |
});
|
|
|
258 |
|
|
|
259 |
// test path: lineTo, moveTo, closePath
|
|
|
260 |
addTest('lineTo', function(testName){
|
|
|
261 |
var surface = getTestSurface(testName, 'lineTo, moveTo, closePath');
|
|
|
262 |
surface.createPath()
|
|
|
263 |
.moveTo(10, 20).lineTo(80, 150)
|
|
|
264 |
.setAbsoluteMode(false).lineTo(40, 0)
|
|
|
265 |
.setAbsoluteMode(true).lineTo(180, 100)
|
|
|
266 |
.setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
|
|
|
267 |
.closePath()
|
|
|
268 |
.setStroke({ color: "red", width: 1 })
|
|
|
269 |
.setFill(null)
|
|
|
270 |
.setTransform({ dx: 10, dy: 18 })
|
|
|
271 |
;
|
|
|
272 |
});
|
|
|
273 |
|
|
|
274 |
addTest('setPath', function(testName){
|
|
|
275 |
var surface = getTestSurface(testName, 'setPath example with lineTo moveTo');
|
|
|
276 |
surface.createPath()
|
|
|
277 |
.moveTo(10, 20).lineTo(80, 150)
|
|
|
278 |
.setAbsoluteMode(false).lineTo(40,0)
|
|
|
279 |
.setAbsoluteMode(true).lineTo(180, 100)
|
|
|
280 |
.setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50)
|
|
|
281 |
.curveTo(10, -80, -150, -10, -90, -10)
|
|
|
282 |
.closePath()
|
|
|
283 |
.setStroke({ color: "red", width: 1 })
|
|
|
284 |
.setFill(null)
|
|
|
285 |
.setTransform({ dx: 10, dy: 58 })
|
|
|
286 |
;
|
|
|
287 |
|
|
|
288 |
surface.createPath({ path: "M10,20 L80,150 l40,0 L180,100 l0,-30 l-30,-50 c10,-80 -150,-10 -90,-10 z" })
|
|
|
289 |
.setFill(null)
|
|
|
290 |
.setStroke({ color: "blue", width: 1 })
|
|
|
291 |
.setTransform({ dx: 50, dy: 78 })
|
|
|
292 |
;
|
|
|
293 |
});
|
|
|
294 |
|
|
|
295 |
// test arcTo
|
|
|
296 |
addTest('arcTo', function(testName){
|
|
|
297 |
var surface = getTestSurface(testName, 'arcTo: from 0 to 360 degree, w/ 30 degree of x axis rotation, rendered with different color');
|
|
|
298 |
|
|
|
299 |
var m = dojox.gfx.matrix;
|
|
|
300 |
var g1 = surface.createGroup();
|
|
|
301 |
var g2 = g1.createGroup();
|
|
|
302 |
|
|
|
303 |
var rx = 100, ry = 60, xRotg = 30;
|
|
|
304 |
var startPoint = m.multiplyPoint(m.rotateg(xRotg), {x: -rx, y: 0 });
|
|
|
305 |
var endPoint = m.multiplyPoint(m.rotateg(xRotg), {x: 0, y: -ry});
|
|
|
306 |
|
|
|
307 |
var re1 = g1.createPath()
|
|
|
308 |
.moveTo(startPoint)
|
|
|
309 |
.arcTo(rx, ry, xRotg, true, false, endPoint)
|
|
|
310 |
.setStroke({color: "red"})
|
|
|
311 |
;
|
|
|
312 |
var ge1 = g1.createPath()
|
|
|
313 |
.moveTo(re1.getLastPosition())
|
|
|
314 |
.arcTo(rx, ry, xRotg, false, false, startPoint)
|
|
|
315 |
.setStroke({color: "blue"})
|
|
|
316 |
;
|
|
|
317 |
var re2 = g2.createPath()
|
|
|
318 |
.moveTo(startPoint)
|
|
|
319 |
.arcTo(rx, ry, xRotg, false, true, endPoint)
|
|
|
320 |
.setStroke({color: "red"})
|
|
|
321 |
;
|
|
|
322 |
var ge2 = g2.createPath()
|
|
|
323 |
.moveTo(re2.getLastPosition())
|
|
|
324 |
.arcTo(rx, ry, xRotg, true, true, startPoint)
|
|
|
325 |
.setStroke({color: "blue"})
|
|
|
326 |
;
|
|
|
327 |
|
|
|
328 |
g1.setTransform({dx: 150, dy: 150});
|
|
|
329 |
g2.setTransform({dx: 10, dy: 10});
|
|
|
330 |
});
|
|
|
331 |
|
|
|
332 |
// test path: curveTo, smoothCurveTo
|
|
|
333 |
addTest('curveTo', function(testName) {
|
|
|
334 |
var surface = getTestSurface(testName, 'curveTo, smoothCurveTo');
|
|
|
335 |
surface.createPath()
|
|
|
336 |
.moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100).smoothCurveTo(300, 300, 200, 200)
|
|
|
337 |
.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
|
|
|
338 |
;
|
|
|
339 |
});
|
|
|
340 |
|
|
|
341 |
// test path: curveTo, smoothCurveTo with relative.
|
|
|
342 |
addTest('curveTo2', function(testName) {
|
|
|
343 |
var surface = getTestSurface(testName, 'curveTo, smoothCurveTo with relative coordination');
|
|
|
344 |
surface.createPath()
|
|
|
345 |
.moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100)
|
|
|
346 |
.setAbsoluteMode(false).smoothCurveTo(150, 200, 50, 100)
|
|
|
347 |
.setAbsoluteMode(true).smoothCurveTo(50, 100, 10, 230)
|
|
|
348 |
.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
|
|
|
349 |
;
|
|
|
350 |
});
|
|
|
351 |
|
|
|
352 |
// test path: curveTo, smoothCurveTo with relative.
|
|
|
353 |
addTest('qCurveTo', function(testName) {
|
|
|
354 |
var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo' );
|
|
|
355 |
surface.createPath()
|
|
|
356 |
.moveTo(10, 15).qCurveTo(50, 50, 100, 100).qSmoothCurveTo(150, 20)
|
|
|
357 |
.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
|
|
|
358 |
;
|
|
|
359 |
});
|
|
|
360 |
|
|
|
361 |
addTest('qCurveTo2', function(testName) {
|
|
|
362 |
var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo with relative' );
|
|
|
363 |
surface.createPath()
|
|
|
364 |
.moveTo(10, 20).qCurveTo(50, 50, 100, 100)
|
|
|
365 |
.setAbsoluteMode(false).qSmoothCurveTo(50, -80)
|
|
|
366 |
.setAbsoluteMode(true).qSmoothCurveTo(200, 80)
|
|
|
367 |
.setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 })
|
|
|
368 |
;
|
|
|
369 |
});
|
|
|
370 |
|
|
|
371 |
// test defines, linearGradient
|
|
|
372 |
addTest('linearGradient', function(testName) {
|
|
|
373 |
var surface = getTestSurface(testName, 'linear gradient fill');
|
|
|
374 |
// this is an example to split the linearGradient from setFill:
|
|
|
375 |
var lg = {
|
|
|
376 |
type: "linear",
|
|
|
377 |
x1: 0, y1: 0, x2: 75, y2: 50,
|
|
|
378 |
colors: [
|
|
|
379 |
{ offset: 0, color: "#F60" },
|
|
|
380 |
{ offset: 1, color: "#FF6" }
|
|
|
381 |
]
|
|
|
382 |
};
|
|
|
383 |
surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
|
|
|
384 |
});
|
|
|
385 |
|
|
|
386 |
// TODO: test radialGradient
|
|
|
387 |
addTest('radialGradient', function(testName) {
|
|
|
388 |
var surface = getTestSurface(testName, 'radial gradient fill');
|
|
|
389 |
// this is a total inline implementation compared with previous one.
|
|
|
390 |
var rg = {
|
|
|
391 |
type: "radial",
|
|
|
392 |
cx: 100, cy: 100, r: 100,
|
|
|
393 |
colors: [
|
|
|
394 |
{ offset: 0, color: "red" },
|
|
|
395 |
{ offset: 0.5, color: "green" },
|
|
|
396 |
{ offset: 1, color: "blue" }
|
|
|
397 |
]
|
|
|
398 |
};
|
|
|
399 |
|
|
|
400 |
surface.createCircle({cx: 100, cy: 100, r: 100})
|
|
|
401 |
.setStroke({})
|
|
|
402 |
.setFill(rg)
|
|
|
403 |
.setTransform({dx: 40, dy: 30})
|
|
|
404 |
;
|
|
|
405 |
// surface.createRect(rect)
|
|
|
406 |
// .setShape({width: 200})
|
|
|
407 |
// .setStroke({})
|
|
|
408 |
// .setFill(rg)
|
|
|
409 |
// .setTransform({dx: 40, dy: 30})
|
|
|
410 |
// ;
|
|
|
411 |
});
|
|
|
412 |
|
|
|
413 |
addTest('attach_gradient', function(testName) {
|
|
|
414 |
var surface = getTestSurface(testName, 'attach gradient fill');
|
|
|
415 |
// this is an example to split the linearGradient from setFill:
|
|
|
416 |
var lg = {
|
|
|
417 |
type: "linear",
|
|
|
418 |
x1: 0, y1: 0, x2: 75, y2: 50,
|
|
|
419 |
colors: [
|
|
|
420 |
{ offset: 0, color: "#F60" },
|
|
|
421 |
{ offset: 0.5, color: "#FAF" },
|
|
|
422 |
{ offset: 1, color: "#FF6" }
|
|
|
423 |
]
|
|
|
424 |
};
|
|
|
425 |
|
|
|
426 |
var lgr = surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 });
|
|
|
427 |
|
|
|
428 |
var ar = dojox.gfx.attachNode(lgr.rawNode);
|
|
|
429 |
// FIXME: more generic method to compare two dictionary?
|
|
|
430 |
console.debug("attach_gradient!");
|
|
|
431 |
|
|
|
432 |
console.debug("attach shape: ");
|
|
|
433 |
isEqual(lgr.shape, ar.shape, "rect.shape");
|
|
|
434 |
console.debug("attach matrix: ");
|
|
|
435 |
isEqual(lgr.matrix, ar.matrix, "rect.matrix");
|
|
|
436 |
console.debug("attach strokeStyle: ");
|
|
|
437 |
isEqual(lgr.strokeStyle, ar.strokeStyle, "rect.strokeStyle");
|
|
|
438 |
console.debug("attach fillStyle: ");
|
|
|
439 |
isEqual(lgr.fillStyle.gradient, ar.fillStyle.gradient, "rect.fillStyle.gradient");
|
|
|
440 |
//isEqual(lgr.fillStyle.id, ar.fillStyle.id, "rect.fillStyle.id");
|
|
|
441 |
});
|
|
|
442 |
|
|
|
443 |
var gTestsToRun = [
|
|
|
444 |
'rect',
|
|
|
445 |
'straight_rect',
|
|
|
446 |
'rotated_rect',
|
|
|
447 |
'skew_rect',
|
|
|
448 |
'matrix_rect',
|
|
|
449 |
//'attach',
|
|
|
450 |
//'attach_gradient',
|
|
|
451 |
'circle',
|
|
|
452 |
'arcTo',
|
|
|
453 |
'line',
|
|
|
454 |
'ellipse',
|
|
|
455 |
'polyline',
|
|
|
456 |
'polygon',
|
|
|
457 |
'lineTo',
|
|
|
458 |
'setPath',
|
|
|
459 |
'curveTo',
|
|
|
460 |
'curveTo2',
|
|
|
461 |
'qCurveTo',
|
|
|
462 |
'qCurveTo2',
|
|
|
463 |
'linearGradient',
|
|
|
464 |
'radialGradient'
|
|
|
465 |
];
|
|
|
466 |
|
|
|
467 |
for (var i = 0; i < gTestsToRun.length; ++i) {
|
|
|
468 |
var testName = gTestsToRun[i];
|
|
|
469 |
var err = runTest(testName);
|
|
|
470 |
if (err) {
|
|
|
471 |
getTestSurface(testName, testName + ' FAILED (' + err + ')');
|
|
|
472 |
}
|
|
|
473 |
}
|
|
|
474 |
|
|
|
475 |
}); // end onload
|
|
|
476 |
</script>
|
|
|
477 |
<style>
|
|
|
478 |
td { border: 1px solid black; text-align: left; vertical-align: top; }
|
|
|
479 |
v:group { text-align: left; }
|
|
|
480 |
</style>
|
|
|
481 |
</head>
|
|
|
482 |
<body>
|
|
|
483 |
<h1>dojox.gfx tests</h1>
|
|
|
484 |
<table>
|
|
|
485 |
<tbody id="testcontainer">
|
|
|
486 |
</tbody>
|
|
|
487 |
</table>
|
|
|
488 |
</body>
|
|
|
489 |
</html>
|