1 | // Copyright 2006 Google Inc. |
---|
2 | // |
---|
3 | // Licensed under the Apache License, Version 2.0 (the "License"); |
---|
4 | // you may not use this file except in compliance with the License. |
---|
5 | // You may obtain a copy of the License at |
---|
6 | // |
---|
7 | // http://www.apache.org/licenses/LICENSE-2.0 |
---|
8 | // |
---|
9 | // Unless required by applicable law or agreed to in writing, software |
---|
10 | // distributed under the License is distributed on an "AS IS" BASIS, |
---|
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
---|
12 | // See the License for the specific language governing permissions and |
---|
13 | // limitations under the License. |
---|
14 | |
---|
15 | |
---|
16 | // Known Issues: (From VML version) |
---|
17 | // |
---|
18 | // * Patterns are not implemented. |
---|
19 | // * Radial gradient are not implemented. The VML version of these look very |
---|
20 | // different from the canvas one. |
---|
21 | // * Clipping paths are not implemented. |
---|
22 | // * Coordsize. The width and height attribute have higher priority than the |
---|
23 | // width and height style values which isn't correct. |
---|
24 | // * Painting mode isn't implemented. |
---|
25 | // * Canvas width/height should is using content-box by default. IE in |
---|
26 | // Quirks mode will draw the canvas using border-box. Either change your |
---|
27 | // doctype to HTML5 |
---|
28 | // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) |
---|
29 | // or use Box Sizing Behavior from WebFX |
---|
30 | // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) |
---|
31 | // * Optimize. There is always room for speed improvements. |
---|
32 | |
---|
33 | //Known Issues: Silverlight version |
---|
34 | // |
---|
35 | // * Doing a transformation during a path (ie lineTo, transform, lineTo) will |
---|
36 | // not work corerctly because the transform is done to the whole path (ie |
---|
37 | // transform, lineTo, lineTo) |
---|
38 | // * Patterns are not yet implemented. |
---|
39 | |
---|
40 | |
---|
41 | // only add this code if we do not already have a canvas implementation |
---|
42 | if (!window.CanvasRenderingContext2D) { |
---|
43 | |
---|
44 | (function () { |
---|
45 | |
---|
46 | var xamlId; |
---|
47 | |
---|
48 | var G_vmlCanvasManager_ = { |
---|
49 | init: function (opt_doc) { |
---|
50 | var doc = opt_doc || document; |
---|
51 | // Create a dummy element so that IE will allow canvas elements to be |
---|
52 | // recognized. |
---|
53 | doc.createElement('canvas'); |
---|
54 | if (/MSIE/.test(navigator.userAgent) && !window.opera) { |
---|
55 | var self = this; |
---|
56 | |
---|
57 | createXamlScriptTag(); |
---|
58 | |
---|
59 | doc.attachEvent('onreadystatechange', function () { |
---|
60 | self.init_(doc); |
---|
61 | }); |
---|
62 | } |
---|
63 | }, |
---|
64 | |
---|
65 | init_: function (doc) { |
---|
66 | // setup default css |
---|
67 | var ss = doc.createStyleSheet(); |
---|
68 | ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + |
---|
69 | // default size is 300x150 in Gecko and Opera |
---|
70 | 'text-align:left;width:300px;height:150px}' + |
---|
71 | 'canvas object{width:100%;height:100%;border:0;' + |
---|
72 | 'background:transparen;margin:0}'; |
---|
73 | |
---|
74 | // find all canvas elements |
---|
75 | var els = doc.getElementsByTagName('canvas'); |
---|
76 | for (var i = 0; i < els.length; i++) { |
---|
77 | if (!els[i].getContext) { |
---|
78 | this.initElement(els[i]); |
---|
79 | } |
---|
80 | } |
---|
81 | }, |
---|
82 | |
---|
83 | |
---|
84 | /** |
---|
85 | * Public initializes a canvas element so that it can be used as canvas |
---|
86 | * element from now on. This is called automatically before the page is |
---|
87 | * loaded but if you are creating elements using createElement you need to |
---|
88 | * make sure this is called on the element. |
---|
89 | * @param {HTMLElement} el The canvas element to initialize. |
---|
90 | * @return {HTMLElement} the element that was created. |
---|
91 | */ |
---|
92 | initElement: function (el) { |
---|
93 | el.getContext = function () { |
---|
94 | if (this.context_) { |
---|
95 | return this.context_; |
---|
96 | } |
---|
97 | return this.context_ = new CanvasRenderingContext2D_(this); |
---|
98 | }; |
---|
99 | |
---|
100 | var attrs = el.attributes; |
---|
101 | if (attrs.width && attrs.width.specified) { |
---|
102 | // TODO: use runtimeStyle and coordsize |
---|
103 | // el.getContext().setWidth_(attrs.width.nodeValue); |
---|
104 | el.style.width = attrs.width.nodeValue + 'px'; |
---|
105 | } else { |
---|
106 | el.width = el.clientWidth; |
---|
107 | } |
---|
108 | if (attrs.height && attrs.height.specified) { |
---|
109 | // TODO: use runtimeStyle and coordsize |
---|
110 | // el.getContext().setHeight_(attrs.height.nodeValue); |
---|
111 | el.style.height = attrs.height.nodeValue + 'px'; |
---|
112 | } else { |
---|
113 | el.height = el.clientHeight; |
---|
114 | } |
---|
115 | |
---|
116 | // insert object tag |
---|
117 | el.innerHTML = getObjectHtml(); |
---|
118 | |
---|
119 | // do not use inline function because that will leak memory |
---|
120 | el.attachEvent('onpropertychange', onPropertyChange); |
---|
121 | return el; |
---|
122 | } |
---|
123 | }; |
---|
124 | |
---|
125 | function onPropertyChange(e) { |
---|
126 | var el = e.srcElement; |
---|
127 | |
---|
128 | switch (e.propertyName) { |
---|
129 | case 'width': |
---|
130 | el.style.width = el.attributes.width.nodeValue + 'px'; |
---|
131 | el.getContext().clearRect(); |
---|
132 | break; |
---|
133 | case 'height': |
---|
134 | el.style.height = el.attributes.height.nodeValue + 'px'; |
---|
135 | el.getContext().clearRect(); |
---|
136 | break; |
---|
137 | } |
---|
138 | } |
---|
139 | |
---|
140 | G_vmlCanvasManager_.init(); |
---|
141 | |
---|
142 | function createXamlScriptTag() { |
---|
143 | // This script tag contains the boilerplate XAML. |
---|
144 | document.write('<script type=text/xaml>' + |
---|
145 | '<Canvas x:Name="root" ' + |
---|
146 | 'xmlns="http://schemas.microsoft.com/client/2007" ' + |
---|
147 | 'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' + |
---|
148 | 'Width="300" ' + |
---|
149 | 'Height="150" ' + |
---|
150 | 'Background="Transparent"> ' + |
---|
151 | '</Canvas>' + |
---|
152 | '</script>'); |
---|
153 | // Find the id of the writtenscript file. |
---|
154 | var scripts = document.scripts; |
---|
155 | var script = scripts[scripts.length - 1]; |
---|
156 | xamlId = script.uniqueID; |
---|
157 | script.id = xamlId; |
---|
158 | } |
---|
159 | |
---|
160 | function getObjectHtml(fn) { |
---|
161 | return '<object type="application/x-silverlight" >' + |
---|
162 | '<param name="windowless" value="true">' + |
---|
163 | '<param name="background" value="transparent">' + |
---|
164 | '<param name="source" value="#' + xamlId + '">' + |
---|
165 | '</object>'; |
---|
166 | } |
---|
167 | |
---|
168 | function hasSilverlight() { |
---|
169 | try { |
---|
170 | new ActiveXObject('AgControl.AgControl'); |
---|
171 | return true; |
---|
172 | } catch(_) { |
---|
173 | return false; |
---|
174 | } |
---|
175 | } |
---|
176 | |
---|
177 | // precompute "00" to "FF" |
---|
178 | var dec2hex = []; |
---|
179 | for (var i = 0; i < 16; i++) { |
---|
180 | for (var j = 0; j < 16; j++) { |
---|
181 | dec2hex[i * 16 + j] = i.toString(16) + j.toString(16); |
---|
182 | } |
---|
183 | } |
---|
184 | |
---|
185 | function createMatrixIdentity() { |
---|
186 | return [ |
---|
187 | [1, 0, 0], |
---|
188 | [0, 1, 0], |
---|
189 | [0, 0, 1] |
---|
190 | ]; |
---|
191 | } |
---|
192 | |
---|
193 | function matrixMultiply(m1, m2) { |
---|
194 | var result = createMatrixIdentity(); |
---|
195 | |
---|
196 | for (var x = 0; x < 3; x++) { |
---|
197 | for (var y = 0; y < 3; y++) { |
---|
198 | var sum = 0; |
---|
199 | |
---|
200 | for (var z = 0; z < 3; z++) { |
---|
201 | sum += m1[x][z] * m2[z][y]; |
---|
202 | } |
---|
203 | |
---|
204 | result[x][y] = sum; |
---|
205 | } |
---|
206 | } |
---|
207 | return result; |
---|
208 | } |
---|
209 | |
---|
210 | function doTransform(ctx) { |
---|
211 | transformObject(ctx, getRoot(ctx), ctx.m_); |
---|
212 | } |
---|
213 | |
---|
214 | function transformObject(ctx, obj, m) { |
---|
215 | var transform = obj.renderTransform; |
---|
216 | var matrix; |
---|
217 | if (!transform) { |
---|
218 | transform = create(ctx, '<MatrixTransform/>'); |
---|
219 | matrix = create(ctx, '<Matrix/>'); |
---|
220 | transform.matrix = matrix; |
---|
221 | obj.renderTransform = transform; |
---|
222 | } else { |
---|
223 | matrix = transform.matrix; |
---|
224 | } |
---|
225 | |
---|
226 | matrix.m11 = m[0][0]; |
---|
227 | matrix.m12 = m[0][1]; |
---|
228 | matrix.m21 = m[1][0]; |
---|
229 | matrix.m22 = m[1][1]; |
---|
230 | matrix.offsetX = m[2][0]; |
---|
231 | matrix.offsetY = m[2][1]; |
---|
232 | } |
---|
233 | |
---|
234 | function copyState(o1, o2) { |
---|
235 | o2.fillStyle = o1.fillStyle; |
---|
236 | o2.lineCap = o1.lineCap; |
---|
237 | o2.lineJoin = o1.lineJoin; |
---|
238 | o2.lineWidth = o1.lineWidth; |
---|
239 | o2.miterLimit = o1.miterLimit; |
---|
240 | o2.shadowBlur = o1.shadowBlur; |
---|
241 | o2.shadowColor = o1.shadowColor; |
---|
242 | o2.shadowOffsetX = o1.shadowOffsetX; |
---|
243 | o2.shadowOffsetY = o1.shadowOffsetY; |
---|
244 | o2.strokeStyle = o1.strokeStyle; |
---|
245 | o2.globalAlpha = o1.globalAlpha; |
---|
246 | o2.arcScaleX_ = o1.arcScaleX_; |
---|
247 | o2.arcScaleY_ = o1.arcScaleY_; |
---|
248 | } |
---|
249 | |
---|
250 | function translateColor(s) { |
---|
251 | var rgbaMatch = /rgba\(([^)]+)\)/gi.exec(s); |
---|
252 | if (rgbaMatch) { |
---|
253 | var parts = rgbaMatch[1].split(','); |
---|
254 | return '#' + dec2hex[Math.floor(Number(parts[3]) * 255)] + |
---|
255 | dec2hex[Number(parts[0])] + |
---|
256 | dec2hex[Number(parts[1])] + |
---|
257 | dec2hex[Number(parts[2])]; |
---|
258 | } |
---|
259 | |
---|
260 | var rgbMatch = /rgb\(([^)]+)\)/gi.exec(s); |
---|
261 | if (rgbMatch) { |
---|
262 | var parts = rgbMatch[1].split(','); |
---|
263 | return '#FF' + dec2hex[Number(parts[0])] + |
---|
264 | dec2hex[Number(parts[1])] + |
---|
265 | dec2hex[Number(parts[2])]; |
---|
266 | } |
---|
267 | |
---|
268 | return s; |
---|
269 | } |
---|
270 | |
---|
271 | function processLineCap(lineCap) { |
---|
272 | switch (lineCap) { |
---|
273 | case 'butt': |
---|
274 | return 'flat'; |
---|
275 | case 'round': |
---|
276 | return 'round'; |
---|
277 | case 'square': |
---|
278 | default: |
---|
279 | return 'square'; |
---|
280 | } |
---|
281 | } |
---|
282 | |
---|
283 | function getRoot(ctx) { |
---|
284 | return ctx.canvas.firstChild.content.findName('root'); |
---|
285 | } |
---|
286 | |
---|
287 | function create(ctx, s, opt_args) { |
---|
288 | if (opt_args) { |
---|
289 | s = s.replace(/\%(\d+)/g, function(match, index) { |
---|
290 | return opt_args[Number(index) - 1]; |
---|
291 | }); |
---|
292 | } |
---|
293 | |
---|
294 | try { |
---|
295 | return ctx.canvas.firstChild.content.createFromXaml(s); |
---|
296 | } catch (ex) { |
---|
297 | throw Error('Could not create XAML from: ' + s); |
---|
298 | } |
---|
299 | } |
---|
300 | |
---|
301 | function drawShape(ctx, s, opt_args) { |
---|
302 | var canvas = ctx.lastCanvas_ || create(ctx, '<Canvas/>'); |
---|
303 | var shape = create(ctx, s, opt_args); |
---|
304 | canvas.children.add(shape); |
---|
305 | transformObject(ctx, canvas, ctx.m_); |
---|
306 | if (!ctx.lastCanvas_) { |
---|
307 | getRoot(ctx).children.add(canvas); |
---|
308 | ctx.lastCanvas_ = canvas; |
---|
309 | } |
---|
310 | return shape; |
---|
311 | } |
---|
312 | |
---|
313 | function createBrushObject(ctx, value) { |
---|
314 | if (value instanceof CanvasGradient_) { |
---|
315 | return value.createBrush_(ctx); |
---|
316 | } else if (value instanceof CanvasPattern_) { |
---|
317 | throw Error('Not implemented'); |
---|
318 | } else { |
---|
319 | return create(ctx, '<SolidColorBrush Color="%1"/>', |
---|
320 | [translateColor(value)]); |
---|
321 | } |
---|
322 | } |
---|
323 | |
---|
324 | /** |
---|
325 | * This class implements CanvasRenderingContext2D interface as described by |
---|
326 | * the WHATWG. |
---|
327 | * @param {HTMLElement} surfaceElement The element that the 2D context should |
---|
328 | * be associated with |
---|
329 | */ |
---|
330 | function CanvasRenderingContext2D_(surfaceElement) { |
---|
331 | this.m_ = createMatrixIdentity(); |
---|
332 | this.lastCanvas_ = null; |
---|
333 | |
---|
334 | this.mStack_ = []; |
---|
335 | this.aStack_ = []; |
---|
336 | this.currentPath_ = []; |
---|
337 | |
---|
338 | // Canvas context properties |
---|
339 | this.strokeStyle = '#000'; |
---|
340 | this.fillStyle = '#000'; |
---|
341 | |
---|
342 | this.lineWidth = 1; |
---|
343 | this.lineJoin = 'miter'; |
---|
344 | this.lineCap = 'butt'; |
---|
345 | this.miterLimit = 10; |
---|
346 | this.globalAlpha = 1; |
---|
347 | this.canvas = surfaceElement; |
---|
348 | }; |
---|
349 | |
---|
350 | |
---|
351 | var contextPrototype = CanvasRenderingContext2D_.prototype; |
---|
352 | |
---|
353 | contextPrototype.clearRect = function() { |
---|
354 | var root = getRoot(this); |
---|
355 | root.children.clear(); |
---|
356 | |
---|
357 | // TODO: Implement |
---|
358 | this.currentPath_ = []; |
---|
359 | this.lastCanvas_ = null; |
---|
360 | |
---|
361 | }; |
---|
362 | |
---|
363 | contextPrototype.beginPath = function() { |
---|
364 | // TODO: Branch current matrix so that save/restore has no effect |
---|
365 | // as per safari docs. |
---|
366 | |
---|
367 | this.currentPath_ = []; |
---|
368 | }; |
---|
369 | |
---|
370 | contextPrototype.moveTo = function(aX, aY) { |
---|
371 | this.currentPath_.push('M' + aX + ',' + aY); |
---|
372 | }; |
---|
373 | |
---|
374 | contextPrototype.lineTo = function(aX, aY) { |
---|
375 | if (this.currentPath_.length == 0) return; |
---|
376 | this.currentPath_.push('L' + aX + ',' + aY); |
---|
377 | }; |
---|
378 | |
---|
379 | contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, |
---|
380 | aCP2x, aCP2y, |
---|
381 | aX, aY) { |
---|
382 | if (this.currentPath_.length == 0) return; |
---|
383 | this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' + |
---|
384 | aCP2x + ',' + aCP2y + ' ' + |
---|
385 | aX + ' ' + aY); |
---|
386 | }; |
---|
387 | |
---|
388 | contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { |
---|
389 | if (this.currentPath_.length == 0) return; |
---|
390 | this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' + |
---|
391 | aX + ',' + aY); |
---|
392 | }; |
---|
393 | |
---|
394 | contextPrototype.arcTo = function(x1, y1, x2, y2, radius) { |
---|
395 | if (this.currentPath_.length == 0) return; |
---|
396 | // TODO: Implement |
---|
397 | }; |
---|
398 | |
---|
399 | contextPrototype.arc = function(aX, aY, aRadius, |
---|
400 | aStartAngle, aEndAngle, aClockwise) { |
---|
401 | var deltaAngle = Math.abs(aStartAngle - aEndAngle); |
---|
402 | // If start and stop are the same WebKit and Moz does nothing |
---|
403 | if (aStartAngle == aEndAngle) { |
---|
404 | // different browsers behave differently here so we do the easiest thing |
---|
405 | return; |
---|
406 | } |
---|
407 | |
---|
408 | var endX = aX + aRadius * Math.cos(aEndAngle); |
---|
409 | var endY = aY + aRadius * Math.sin(aEndAngle); |
---|
410 | |
---|
411 | if (deltaAngle >= 2 * Math.PI) { |
---|
412 | // if larger than 2PI |
---|
413 | this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise); |
---|
414 | this.arc(aX, aY, aRadius, aStartAngle + Math.PI, |
---|
415 | aStartAngle + 2 * Math.PI, aClockwise); |
---|
416 | // now move to end point |
---|
417 | this.moveTo(endX, endY); |
---|
418 | return; |
---|
419 | } |
---|
420 | |
---|
421 | var startX = aX + aRadius * Math.cos(aStartAngle); |
---|
422 | var startY = aY + aRadius * Math.sin(aStartAngle); |
---|
423 | var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs? |
---|
424 | var sweepDirection = aClockwise ? 0 : 1; |
---|
425 | var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1; |
---|
426 | |
---|
427 | if (this.currentPath_.length != 0) { |
---|
428 | // add line to start point |
---|
429 | this.lineTo(startX, startY); |
---|
430 | } else { |
---|
431 | this.moveTo(startX, startY); |
---|
432 | } |
---|
433 | |
---|
434 | this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' + |
---|
435 | rotationAngle + ' ' + |
---|
436 | isLargeArc + ' ' + |
---|
437 | sweepDirection + ' ' + |
---|
438 | endX + ',' + endY); |
---|
439 | }; |
---|
440 | |
---|
441 | contextPrototype.rect = function(aX, aY, aWidth, aHeight) { |
---|
442 | this.moveTo(aX, aY); |
---|
443 | this.lineTo(aX + aWidth, aY); |
---|
444 | this.lineTo(aX + aWidth, aY + aHeight); |
---|
445 | this.lineTo(aX, aY + aHeight); |
---|
446 | this.closePath(); |
---|
447 | }; |
---|
448 | |
---|
449 | contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { |
---|
450 | // Will destroy any existing path (same as FF behaviour) |
---|
451 | this.beginPath(); |
---|
452 | this.moveTo(aX, aY); |
---|
453 | this.lineTo(aX + aWidth, aY); |
---|
454 | this.lineTo(aX + aWidth, aY + aHeight); |
---|
455 | this.lineTo(aX, aY + aHeight); |
---|
456 | this.closePath(); |
---|
457 | this.stroke(); |
---|
458 | this.currentPath_ = []; |
---|
459 | }; |
---|
460 | |
---|
461 | contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { |
---|
462 | // Will destroy any existing path (same as FF behaviour) |
---|
463 | this.beginPath(); |
---|
464 | this.moveTo(aX, aY); |
---|
465 | this.lineTo(aX + aWidth, aY); |
---|
466 | this.lineTo(aX + aWidth, aY + aHeight); |
---|
467 | this.lineTo(aX, aY + aHeight); |
---|
468 | this.closePath(); |
---|
469 | this.fill(); |
---|
470 | this.currentPath_ = []; |
---|
471 | }; |
---|
472 | |
---|
473 | contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { |
---|
474 | return new LinearCanvasGradient_(aX0, aY0, aX1, aY1); |
---|
475 | }; |
---|
476 | |
---|
477 | contextPrototype.createRadialGradient = function(x0, y0, |
---|
478 | r0, x1, |
---|
479 | y1, r1) { |
---|
480 | return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1); |
---|
481 | }; |
---|
482 | |
---|
483 | contextPrototype.drawImage = function (image, var_args) { |
---|
484 | var dx, dy, dw, dh, sx, sy, sw, sh; |
---|
485 | |
---|
486 | // For Silverlight we don't need to get the size of the image since |
---|
487 | // Silverlight uses the image original dimension if not provided. |
---|
488 | |
---|
489 | if (arguments.length == 3) { |
---|
490 | dx = arguments[1]; |
---|
491 | dy = arguments[2]; |
---|
492 | // Keep sx, sy, sw, dw, sh and dh undefined |
---|
493 | } else if (arguments.length == 5) { |
---|
494 | dx = arguments[1]; |
---|
495 | dy = arguments[2]; |
---|
496 | dw = arguments[3]; |
---|
497 | dh = arguments[4]; |
---|
498 | // Keep sx, sy, sw and sh undefined |
---|
499 | } else if (arguments.length == 9) { |
---|
500 | sx = arguments[1]; |
---|
501 | sy = arguments[2]; |
---|
502 | sw = arguments[3]; |
---|
503 | sh = arguments[4]; |
---|
504 | dx = arguments[5]; |
---|
505 | dy = arguments[6]; |
---|
506 | dw = arguments[7]; |
---|
507 | dh = arguments[8]; |
---|
508 | } else { |
---|
509 | throw Error('Invalid number of arguments'); |
---|
510 | } |
---|
511 | |
---|
512 | var slImage; |
---|
513 | |
---|
514 | // If we have a source rect we need to clip the image. |
---|
515 | if (arguments.length == 9) { |
---|
516 | slImage = drawShape(this, '<Image Source="%1"/>', [image.src]); |
---|
517 | |
---|
518 | var clipRect = create(this, |
---|
519 | '<RectangleGeometry Rect="%1,%2,%3,%4"/>', [sx, sy, sw, sh]); |
---|
520 | slImage.clip = clipRect; |
---|
521 | |
---|
522 | var m = createMatrixIdentity(); |
---|
523 | |
---|
524 | // translate to 0,0 |
---|
525 | m[2][0] = -sx; |
---|
526 | m[2][1] = -sy; |
---|
527 | |
---|
528 | // scale |
---|
529 | var m2 = createMatrixIdentity(); |
---|
530 | m2[0][0] = dw / sw; |
---|
531 | m2[1][1] = dh / sh; |
---|
532 | |
---|
533 | m = matrixMultiply(m, m2); |
---|
534 | |
---|
535 | // translate to destination |
---|
536 | m[2][0] += dx; |
---|
537 | m[2][1] += dy; |
---|
538 | |
---|
539 | transformObject(this, slImage, m); |
---|
540 | |
---|
541 | } else { |
---|
542 | slImage = drawShape(this, |
---|
543 | '<Image Source="%1" Canvas.Left="%2" Canvas.Top="%3"/>', |
---|
544 | [image.src, dx, dy]); |
---|
545 | if (dw != undefined || dh != undefined) { |
---|
546 | slImage.width = dw; |
---|
547 | slImage.height = dh; |
---|
548 | slImage.stretch = 'fill'; |
---|
549 | } |
---|
550 | } |
---|
551 | }; |
---|
552 | |
---|
553 | contextPrototype.stroke = function() { |
---|
554 | if (this.currentPath_.length == 0) return; |
---|
555 | var path = drawShape(this, '<Path Data="%1"/>', |
---|
556 | [this.currentPath_.join(' ')]); |
---|
557 | path.stroke = createBrushObject(this, this.strokeStyle); |
---|
558 | path.opacity = this.globalAlpha; |
---|
559 | path.strokeThickness = this.lineWidth; |
---|
560 | path.strokeMiterLimit = this.miterLimit; |
---|
561 | path.strokeLineJoin = this.lineJoin; |
---|
562 | // Canvas does not differentiate start from end |
---|
563 | path.strokeEndLineCap = path.strokeStartLineCap = |
---|
564 | processLineCap(this.lineCap); |
---|
565 | }; |
---|
566 | |
---|
567 | contextPrototype.fill = function() { |
---|
568 | if (this.currentPath_.length == 0) return; |
---|
569 | var path = drawShape(this, '<Path Data="%1"/>', |
---|
570 | [this.currentPath_.join(' ')]); |
---|
571 | // The spec says to use non zero but Silverlight uses EvenOdd by defaul |
---|
572 | path.data.fillRule = 'NonZero'; |
---|
573 | path.fill = createBrushObject(this, this.fillStyle); |
---|
574 | // TODO: What about even-odd etc? |
---|
575 | }; |
---|
576 | |
---|
577 | contextPrototype.closePath = function() { |
---|
578 | this.currentPath_.push('z'); |
---|
579 | }; |
---|
580 | |
---|
581 | /** |
---|
582 | * Sets the transformation matrix and marks things as dirty |
---|
583 | */ |
---|
584 | function setM(self, m) { |
---|
585 | self.m_ = m; |
---|
586 | self.lastCanvas_ = null; |
---|
587 | }; |
---|
588 | |
---|
589 | contextPrototype.save = function() { |
---|
590 | var o = {}; |
---|
591 | copyState(this, o); |
---|
592 | this.aStack_.push(o); |
---|
593 | this.mStack_.push(this.m_); |
---|
594 | setM(this, matrixMultiply(createMatrixIdentity(), this.m_)); |
---|
595 | }; |
---|
596 | |
---|
597 | contextPrototype.restore = function() { |
---|
598 | copyState(this.aStack_.pop(), this); |
---|
599 | setM(this, this.mStack_.pop()); |
---|
600 | }; |
---|
601 | |
---|
602 | contextPrototype.translate = function(aX, aY) { |
---|
603 | var m1 = [ |
---|
604 | [1, 0, 0], |
---|
605 | [0, 1, 0], |
---|
606 | [aX, aY, 1] |
---|
607 | ]; |
---|
608 | |
---|
609 | setM(this, matrixMultiply(m1, this.m_)); |
---|
610 | }; |
---|
611 | |
---|
612 | contextPrototype.rotate = function(aRot) { |
---|
613 | var c = Math.cos(aRot); |
---|
614 | var s = Math.sin(aRot); |
---|
615 | |
---|
616 | var m1 = [ |
---|
617 | [c, s, 0], |
---|
618 | [-s, c, 0], |
---|
619 | [0, 0, 1] |
---|
620 | ]; |
---|
621 | |
---|
622 | setM(this, matrixMultiply(m1, this.m_)); |
---|
623 | }; |
---|
624 | |
---|
625 | contextPrototype.scale = function(aX, aY) { |
---|
626 | var m1 = [ |
---|
627 | [aX, 0, 0], |
---|
628 | [0, aY, 0], |
---|
629 | [0, 0, 1] |
---|
630 | ]; |
---|
631 | |
---|
632 | setM(this, matrixMultiply(m1, this.m_)); |
---|
633 | }; |
---|
634 | |
---|
635 | contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { |
---|
636 | var m1 = [ |
---|
637 | [m11, m12, 0], |
---|
638 | [m21, m22, 0], |
---|
639 | [ dx, dy, 1] |
---|
640 | ]; |
---|
641 | |
---|
642 | setM(this, matrixMultiply(m1, this.m_)); |
---|
643 | }; |
---|
644 | |
---|
645 | contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { |
---|
646 | setM(this, [ |
---|
647 | [m11, m12, 0], |
---|
648 | [m21, m22, 0], |
---|
649 | [ dx, dy, 1], |
---|
650 | ]); |
---|
651 | }; |
---|
652 | |
---|
653 | /******** STUBS ********/ |
---|
654 | contextPrototype.clip = function() { |
---|
655 | // TODO: Implement |
---|
656 | }; |
---|
657 | |
---|
658 | contextPrototype.createPattern = function() { |
---|
659 | return new CanvasPattern_; |
---|
660 | }; |
---|
661 | |
---|
662 | // Gradient / Pattern Stubs |
---|
663 | function CanvasGradient_() { |
---|
664 | this.colors_ = []; |
---|
665 | } |
---|
666 | |
---|
667 | CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { |
---|
668 | aColor = translateColor(aColor); |
---|
669 | this.colors_.push({offset: aOffset, color: aColor}); |
---|
670 | }; |
---|
671 | |
---|
672 | CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) { |
---|
673 | var gradientStopCollection = brushObj.gradientStops; |
---|
674 | for (var i = 0, c; c = colors[i]; i++) { |
---|
675 | var color = translateColor(c.color); |
---|
676 | gradientStopCollection.add(create(ctx, |
---|
677 | '<GradientStop Color="%1" Offset="%2"/>', [color, c.offset])); |
---|
678 | } |
---|
679 | }; |
---|
680 | |
---|
681 | function LinearCanvasGradient_(x0, y0, x1, y1) { |
---|
682 | CanvasGradient_.call(this); |
---|
683 | this.x0_ = x0; |
---|
684 | this.y0_ = y0; |
---|
685 | this.x1_ = x1; |
---|
686 | this.y1_ = y1; |
---|
687 | } |
---|
688 | LinearCanvasGradient_.prototype = new CanvasGradient_; |
---|
689 | |
---|
690 | LinearCanvasGradient_.prototype.createBrush_ = function(ctx) { |
---|
691 | var brushObj = create(ctx, '<LinearGradientBrush MappingMode="Absolute" ' + |
---|
692 | 'StartPoint="%1,%2" EndPoint="%3,%4"/>', |
---|
693 | [this.x0_, this.y0_, this.x1_, this.y1_]); |
---|
694 | this.createStops_(ctx, brushObj, this.colors_); |
---|
695 | return brushObj; |
---|
696 | }; |
---|
697 | |
---|
698 | function isNanOrInfinite(v) { |
---|
699 | return isNaN(v) || !isFinite(v); |
---|
700 | } |
---|
701 | |
---|
702 | function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) { |
---|
703 | if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) || |
---|
704 | isNanOrInfinite(x1) || isNanOrInfinite(y1)) { |
---|
705 | // IE does not support DOMException so this is as close as we get. |
---|
706 | var error = Error('DOMException.INDEX_SIZE_ERR'); |
---|
707 | error.code = 1; |
---|
708 | throw error; |
---|
709 | } |
---|
710 | |
---|
711 | CanvasGradient_.call(this); |
---|
712 | this.x0_ = x0; |
---|
713 | this.y0_ = y0; |
---|
714 | this.r0_ = r0; |
---|
715 | this.x1_ = x1; |
---|
716 | this.y1_ = y1; |
---|
717 | this.r1_ = r1; |
---|
718 | } |
---|
719 | RadialCanvasGradient_.prototype = new CanvasGradient_; |
---|
720 | |
---|
721 | CanvasGradient_.prototype.createBrush_ = function(ctx) { |
---|
722 | if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) { |
---|
723 | return null; |
---|
724 | } |
---|
725 | |
---|
726 | var radius = Math.max(this.r0_, this.r1_); |
---|
727 | var minRadius = Math.min(this.r0_, this.r1_); |
---|
728 | var brushObj = create(ctx, '<RadialGradientBrush MappingMode="Absolute" ' + |
---|
729 | 'GradientOrigin="%1,%2" Center="%3,%4" ' + |
---|
730 | 'RadiusX="%5" RadiusY="%5"/>', |
---|
731 | [this.x0_, this.y0_, this.x1_, this.y1_, radius]); |
---|
732 | |
---|
733 | var colors = this.colors_.concat(); |
---|
734 | |
---|
735 | if (this.r1_ < this.r0_) { |
---|
736 | // reverse color stop array |
---|
737 | colors.reverse(); |
---|
738 | for (var i = 0, c; c = colors[i]; i++) { |
---|
739 | c.offset = 1 - c.offset; |
---|
740 | } |
---|
741 | } |
---|
742 | |
---|
743 | // sort the color stops |
---|
744 | colors.sort(function(c1, c2) { |
---|
745 | return c1.offset - c2.offset; |
---|
746 | }); |
---|
747 | |
---|
748 | if (minRadius > 0) { |
---|
749 | // We need to adjust the color stops since SL always have the inner radius |
---|
750 | // at (0, 0) so we change the stops in case the min radius is not 0. |
---|
751 | for (var i = 0, c; c = colors[i]; i++) { |
---|
752 | c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset; |
---|
753 | } |
---|
754 | } |
---|
755 | |
---|
756 | this.createStops_(ctx, brushObj, colors); |
---|
757 | return brushObj; |
---|
758 | }; |
---|
759 | |
---|
760 | function CanvasPattern_() {} |
---|
761 | |
---|
762 | // set up externs |
---|
763 | G_vmlCanvasManager = G_vmlCanvasManager_; |
---|
764 | CanvasRenderingContext2D = CanvasRenderingContext2D_; |
---|
765 | CanvasGradient = CanvasGradient_; |
---|
766 | CanvasPattern = CanvasPattern_; |
---|
767 | |
---|
768 | })(); |
---|
769 | |
---|
770 | } // if |
---|