[2] | 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 |
---|