excanvas.js - explorercanvas - Project Hosting on Google Code

‹r44

r48

r68›

Source path: svn/ trunk/ silverlight/ excanvas.js

// Copyright 2006 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.


// Known Issues: (From VML version)
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these look very
//   different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority than the
//   width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
//   Quirks mode will draw the canvas using border-box. Either change your
//   doctype to HTML5
//   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
//   or use Box Sizing Behavior from WebFX
//   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Optimize. There is always room for speed improvements.

//Known Issues: Silverlight version
//
// * Doing a transformation during a path (ie lineTo, transform, lineTo) will
//   not work corerctly because the transform is done to the whole path (ie
//   transform, lineTo, lineTo)
// * Patterns are not yet implemented.


// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {

(function () {

  var xamlId;

  var G_vmlCanvasManager_ = {
    init: function (opt_doc) {
      var doc = opt_doc || document;
      // Create a dummy element so that IE will allow canvas elements to be
      // recognized.
      doc.createElement('canvas');
      if (/MSIE/.test(navigator.userAgent) && !window.opera) {
        var self = this;

        createXamlScriptTag();

        doc.attachEvent('onreadystatechange', function () {
          self.init_(doc);
        });
      }
    },

    init_: function (doc) {
      // setup default css
      var ss = doc.createStyleSheet();
      ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
          // default size is 300x150 in Gecko and Opera
          'text-align:left;width:300px;height:150px}' +
          'canvas object{width:100%;height:100%;border:0;' +
          'background:transparen;margin:0}';

      // find all canvas elements
      var els = doc.getElementsByTagName('canvas');
      for (var i = 0; i < els.length; i++) {
        if (!els[i].getContext) {
          this.initElement(els[i]);
        }
      }
    },


    /**
     * Public initializes a canvas element so that it can be used as canvas
     * element from now on. This is called automatically before the page is
     * loaded but if you are creating elements using createElement you need to
     * make sure this is called on the element.
     * @param {HTMLElement} el The canvas element to initialize.
     * @return {HTMLElement} the element that was created.
     */
    initElement: function (el) {
      el.getContext = function () {
        if (this.context_) {
          return this.context_;
        }
        return this.context_ = new CanvasRenderingContext2D_(this);
      };

      var attrs = el.attributes;
      if (attrs.width && attrs.width.specified) {
        // TODO: use runtimeStyle and coordsize
        // el.getContext().setWidth_(attrs.width.nodeValue);
        el.style.width = attrs.width.nodeValue + 'px';
      } else {
        el.width = el.clientWidth;
      }
      if (attrs.height && attrs.height.specified) {
        // TODO: use runtimeStyle and coordsize
        // el.getContext().setHeight_(attrs.height.nodeValue);
        el.style.height = attrs.height.nodeValue + 'px';
      } else {
        el.height = el.clientHeight;
      }

      // insert object tag
      el.innerHTML = getObjectHtml();

      // do not use inline function because that will leak memory
      el.attachEvent('onpropertychange', onPropertyChange);
      return el;
    }
  };

  function onPropertyChange(e) {
    var el = e.srcElement;

    switch (e.propertyName) {
      case 'width':
        el.style.width = el.attributes.width.nodeValue + 'px';
        el.getContext().clearRect();
        break;
      case 'height':
        el.style.height = el.attributes.height.nodeValue + 'px';
        el.getContext().clearRect();
        break;
    }
  }

  G_vmlCanvasManager_.init();

  function createXamlScriptTag() {
    // This script tag contains the boilerplate XAML.
    document.write('<script type=text/xaml>' +
        '<Canvas x:Name="root" ' +
        'xmlns="http://schemas.microsoft.com/client/2007" ' +
        'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' +
        'Width="300" ' +
        'Height="150" ' +
        'Background="Transparent"> ' +
        '</Canvas>' +
        '</script>');
    // Find the id of the writtenscript file.
    var scripts = document.scripts;
    var script = scripts[scripts.length - 1];
    xamlId = script.uniqueID;
    script.id = xamlId;
  }

  function getObjectHtml(fn) {
    return '<object type="application/x-silverlight" >' +
        '<param name="windowless" value="true">' +
        '<param name="background" value="transparent">' +
        '<param name="source" value="#' + xamlId + '">' +
        '</object>';
  }

  function hasSilverlight() {
    try {
      new ActiveXObject('AgControl.AgControl');
      return true;
    } catch(_) {
      return false;
    }
  }

  // precompute "00" to "FF"
  var dec2hex = [];
  for (var i = 0; i < 16; i++) {
    for (var j = 0; j < 16; j++) {
      dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
    }
  }

  function createMatrixIdentity() {
    return [
      [1, 0, 0],
      [0, 1, 0],
      [0, 0, 1]
    ];
  }

  function matrixMultiply(m1, m2) {
    var result = createMatrixIdentity();

    for (var x = 0; x < 3; x++) {
      for (var y = 0; y < 3; y++) {
        var sum = 0;

        for (var z = 0; z < 3; z++) {
          sum += m1[x][z] * m2[z][y];
        }


        result[x][y] = sum;
      }
    }
    return result;
  }

  function doTransform(ctx) {
    transformObject(ctx, getRoot(ctx), ctx.m_);
  }

  function transformObject(ctx, obj, m) {
    var transform = obj.renderTransform;
    var matrix;
    if (!transform) {
      transform = create(ctx, '<MatrixTransform/>');
      matrix = create(ctx, '<Matrix/>');
      transform.matrix = matrix;
      obj.renderTransform = transform;
    } else {
      matrix = transform.matrix;
    }

    matrix.m11 = m[0][0];
    matrix.m12 = m[0][1];
    matrix.m21 = m[1][0];
    matrix.m22 = m[1][1];
    matrix.offsetX = m[2][0];
    matrix.offsetY = m[2][1];
  }

  function copyState(o1, o2) {
    o2.fillStyle     = o1.fillStyle;
    o2.lineCap       = o1.lineCap;
    o2.lineJoin      = o1.lineJoin;
    o2.lineWidth     = o1.lineWidth;
    o2.miterLimit    = o1.miterLimit;
    o2.shadowBlur    = o1.shadowBlur;
    o2.shadowColor   = o1.shadowColor;
    o2.shadowOffsetX = o1.shadowOffsetX;
    o2.shadowOffsetY = o1.shadowOffsetY;
    o2.strokeStyle   = o1.strokeStyle;
    o2.globalAlpha   = o1.globalAlpha;
    o2.arcScaleX_    = o1.arcScaleX_;
    o2.arcScaleY_    = o1.arcScaleY_;
  }

  function translateColor(s) {
    var rgbaMatch = /rgba\(([^)]+)\)/gi.exec(s);
    if (rgbaMatch) {
      var parts = rgbaMatch[1].split(',');
      return '#' + dec2hex[Math.floor(Number(parts[3]) * 255)] +
          dec2hex[Number(parts[0])] +
          dec2hex[Number(parts[1])] +
          dec2hex[Number(parts[2])];
    }

    var rgbMatch  = /rgb\(([^)]+)\)/gi.exec(s);
    if (rgbMatch) {
      var parts = rgbMatch[1].split(',');
      return '#FF' + dec2hex[Number(parts[0])] +
          dec2hex[Number(parts[1])] +
          dec2hex[Number(parts[2])];
    }

    return s;
  }

  function processLineCap(lineCap) {
    switch (lineCap) {
      case 'butt':
        return 'flat';
      case 'round':
        return 'round';
      case 'square':
      default:
        return 'square';
    }
  }

  function getRoot(ctx) {
    return ctx.canvas.firstChild.content.findName('root');
  }

  function create(ctx, s, opt_args) {
    if (opt_args) {
      s = s.replace(/\%(\d+)/g, function(match, index) {
        return opt_args[Number(index) - 1];
      });
    }

    try {
      return ctx.canvas.firstChild.content.createFromXaml(s);
    } catch (ex) {
      throw Error('Could not create XAML from: ' + s);
    }
  }

  function drawShape(ctx, s, opt_args) {
    var canvas = ctx.lastCanvas_ || create(ctx, '<Canvas/>');
    var shape = create(ctx, s, opt_args);
    canvas.children.add(shape);
    transformObject(ctx, canvas, ctx.m_);
    if (!ctx.lastCanvas_) {
      getRoot(ctx).children.add(canvas);
      ctx.lastCanvas_ = canvas;
    }
    return shape;
  }

  function createBrushObject(ctx, value) {
    if (value instanceof CanvasGradient_) {
      return value.createBrush_(ctx);
    } else if (value instanceof CanvasPattern_) {
      throw Error('Not implemented');
    } else {
      return create(ctx, '<SolidColorBrush Color="%1"/>',
                    [translateColor(value)]);
    }
  }

  /**
   * This class implements CanvasRenderingContext2D interface as described by
   * the WHATWG.
   * @param {HTMLElement} surfaceElement The element that the 2D context should
   *     be associated with
   */
   function CanvasRenderingContext2D_(surfaceElement) {
    this.m_ = createMatrixIdentity();
    this.lastCanvas_ = null;

    this.mStack_ = [];
    this.aStack_ = [];
    this.currentPath_ = [];

    // Canvas context properties
    this.strokeStyle = '#000';
    this.fillStyle = '#000';

    this.lineWidth = 1;
    this.lineJoin = 'miter';
    this.lineCap = 'butt';
    this.miterLimit = 10;
    this.globalAlpha = 1;
    this.canvas = surfaceElement;
  };


  var contextPrototype = CanvasRenderingContext2D_.prototype;

  contextPrototype.clearRect = function() {
    var root = getRoot(this);
    root.children.clear();

    // TODO: Implement
    this.currentPath_ = [];
    this.lastCanvas_ = null;

  };

  contextPrototype.beginPath = function() {
    // TODO: Branch current matrix so that save/restore has no effect
    //       as per safari docs.

    this.currentPath_ = [];
  };

  contextPrototype.moveTo = function(aX, aY) {
    this.currentPath_.push('M' + aX + ',' + aY);
  };

  contextPrototype.lineTo = function(aX, aY) {
    if (this.currentPath_.length == 0) return;
    this.currentPath_.push('L' + aX + ',' + aY);
  };

  contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
                                            aCP2x, aCP2y,
                                            aX, aY) {
    if (this.currentPath_.length == 0) return;
    this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' +
                           aCP2x + ',' + aCP2y + ' ' +
                           aX + ' ' + aY);
  };

  contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
    if (this.currentPath_.length == 0) return;
    this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' +
                           aX + ',' + aY);
  };

  contextPrototype.arcTo = function(x1, y1, x2, y2, radius) {
    if (this.currentPath_.length == 0) return;
    // TODO: Implement
  };

  contextPrototype.arc = function(aX, aY, aRadius,
                                  aStartAngle, aEndAngle, aClockwise) {
    var deltaAngle = Math.abs(aStartAngle - aEndAngle);
    // If start and stop are the same WebKit and Moz does nothing
    if (aStartAngle == aEndAngle) {
      // different browsers behave differently here so we do the easiest thing
      return;
    }


    var endX = aX + aRadius * Math.cos(aEndAngle);
    var endY = aY + aRadius * Math.sin(aEndAngle);

    if (deltaAngle >= 2 * Math.PI) {
      // if larger than 2PI
      this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise);
      this.arc(aX, aY, aRadius, aStartAngle + Math.PI,
               aStartAngle + 2 * Math.PI, aClockwise);
      // now move to end point
      this.moveTo(endX, endY);
      return;
    }

    var startX = aX + aRadius * Math.cos(aStartAngle);
    var startY = aY + aRadius * Math.sin(aStartAngle);
    var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs?
    var sweepDirection = aClockwise ? 0 : 1;
    var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1;

    if (this.currentPath_.length != 0) {
      // add line to start point
      this.lineTo(startX, startY);
    } else {
      this.moveTo(startX, startY);
    }

    this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' +
                           rotationAngle + ' ' +
                           isLargeArc + ' ' +
                           sweepDirection + ' ' +
                           endX + ',' + endY);
  };

  contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
    this.moveTo(aX, aY);
    this.lineTo(aX + aWidth, aY);
    this.lineTo(aX + aWidth, aY + aHeight);
    this.lineTo(aX, aY + aHeight);
    this.closePath();
  };

  contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
    // Will destroy any existing path (same as FF behaviour)
    this.beginPath();
    this.moveTo(aX, aY);
    this.lineTo(aX + aWidth, aY);
    this.lineTo(aX + aWidth, aY + aHeight);
    this.lineTo(aX, aY + aHeight);
    this.closePath();
    this.stroke();
    this.currentPath_ = [];
  };

  contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
    // Will destroy any existing path (same as FF behaviour)
    this.beginPath();
    this.moveTo(aX, aY);
    this.lineTo(aX + aWidth, aY);
    this.lineTo(aX + aWidth, aY + aHeight);
    this.lineTo(aX, aY + aHeight);
    this.closePath();
    this.fill();
    this.currentPath_ = [];
  };

  contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
    return new LinearCanvasGradient_(aX0, aY0, aX1, aY1);
  };

  contextPrototype.createRadialGradient = function(x0, y0,
                                                   r0, x1,
                                                   y1, r1) {
    return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1);
  };

  contextPrototype.drawImage = function (image, var_args) {
    var dx, dy, dw, dh, sx, sy, sw, sh;

    // For Silverlight we don't need to get the size of the image since
    // Silverlight uses the image original dimension if not provided.

    if (arguments.length == 3) {
      dx = arguments[1];
      dy = arguments[2];
      // Keep sx, sy, sw, dw, sh and dh undefined
    } else if (arguments.length == 5) {
      dx = arguments[1];
      dy = arguments[2];
      dw = arguments[3];
      dh = arguments[4];
      // Keep sx, sy, sw and sh undefined
    } else if (arguments.length == 9) {
      sx = arguments[1];
      sy = arguments[2];
      sw = arguments[3];
      sh = arguments[4];
      dx = arguments[5];
      dy = arguments[6];
      dw = arguments[7];
      dh = arguments[8];
    } else {
      throw Error('Invalid number of arguments');
    }

    var slImage;

    // If we have a source rect we need to clip the image.
    if (arguments.length == 9) {
      slImage = drawShape(this, '<Image Source="%1"/>', [image.src]);

      var clipRect = create(this,
          '<RectangleGeometry Rect="%1,%2,%3,%4"/>', [sx, sy, sw, sh]);
      slImage.clip = clipRect;

      var m = createMatrixIdentity();

      // translate to 0,0
      m[2][0] = -sx;
      m[2][1] = -sy;

      // scale
      var m2 = createMatrixIdentity();
      m2[0][0] = dw / sw;
      m2[1][1] = dh / sh;

      m = matrixMultiply(m, m2);

      // translate to destination
      m[2][0] += dx;
      m[2][1] += dy;

      transformObject(this, slImage, m);

    } else {
      slImage = drawShape(this,
          '<Image Source="%1" Canvas.Left="%2" Canvas.Top="%3"/>',
          [image.src, dx, dy]);
      if (dw != undefined || dh != undefined) {
        slImage.width = dw;
        slImage.height = dh;
        slImage.stretch = 'fill';
      }
    }
  };

  contextPrototype.stroke = function() {
    if (this.currentPath_.length == 0) return;
    var path = drawShape(this, '<Path Data="%1"/>',
                         [this.currentPath_.join(' ')]);
    path.stroke = createBrushObject(this, this.strokeStyle);
    path.opacity = this.globalAlpha;
    path.strokeThickness = this.lineWidth;
    path.strokeMiterLimit = this.miterLimit;
    path.strokeLineJoin = this.lineJoin;
    // Canvas does not differentiate start from end
    path.strokeEndLineCap = path.strokeStartLineCap =
        processLineCap(this.lineCap);
  };

  contextPrototype.fill = function() {
    if (this.currentPath_.length == 0) return;
    var path = drawShape(this, '<Path Data="%1"/>',
                         [this.currentPath_.join(' ')]);
    // The spec says to use non zero but Silverlight uses EvenOdd by defaul
    path.data.fillRule = 'NonZero';
    path.fill = createBrushObject(this, this.fillStyle);
    // TODO: What about even-odd etc?
  };

  contextPrototype.closePath = function() {
    this.currentPath_.push('z');
  };

  /**
   * Sets the transformation matrix and marks things as dirty
   */
  function setM(self, m) {
    self.m_ = m;
    self.lastCanvas_ = null;
  };

  contextPrototype.save = function() {
    var o = {};
    copyState(this, o);
    this.aStack_.push(o);
    this.mStack_.push(this.m_);
    setM(this, matrixMultiply(createMatrixIdentity(), this.m_));
  };

  contextPrototype.restore = function() {
    copyState(this.aStack_.pop(), this);
    setM(this, this.mStack_.pop());
  };

  contextPrototype.translate = function(aX, aY) {
    var m1 = [
      [1,  0,  0],
      [0,  1,  0],
      [aX, aY, 1]
    ];


    setM(this, matrixMultiply(m1, this.m_));
  };

  contextPrototype.rotate = function(aRot) {
    var c = Math.cos(aRot);
    var s = Math.sin(aRot);

    var m1 = [
      [c,  s, 0],
      [-s, c, 0],
      [0,  0, 1]
    ];

    setM(this, matrixMultiply(m1, this.m_));
  };

  contextPrototype.scale = function(aX, aY) {
    var m1 = [
      [aX, 0,  0],
      [0,  aY, 0],
      [0,  0,  1]
    ];

    setM(this, matrixMultiply(m1, this.m_));
  };

  contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
    var m1 = [
      [m11, m12, 0],
      [m21, m22, 0],
      [ dx,  dy, 1]
    ];

    setM(this, matrixMultiply(m1, this.m_));
  };

  contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
    setM(this, [
      [m11, m12, 0],
      [m21, m22, 0],
      [ dx,  dy, 1],
    ]);
  };

  /******** STUBS ********/
  contextPrototype.clip = function() {
    // TODO: Implement
  };

  contextPrototype.createPattern = function() {
    return new CanvasPattern_;
  };

  // Gradient / Pattern Stubs
  function CanvasGradient_() {
    this.colors_ = [];
  }

  CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
    aColor = translateColor(aColor);
    this.colors_.push({offset: aOffset, color: aColor});
  };

  CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) {
    var gradientStopCollection = brushObj.gradientStops;
    for (var i = 0, c; c = colors[i]; i++) {
      var color = translateColor(c.color);
      gradientStopCollection.add(create(ctx,
          '<GradientStop Color="%1" Offset="%2"/>', [color, c.offset]));
    }
  };

  function LinearCanvasGradient_(x0, y0, x1, y1) {
    CanvasGradient_.call(this);
    this.x0_ = x0;
    this.y0_ = y0;
    this.x1_ = x1;
    this.y1_ = y1;
  }
  LinearCanvasGradient_.prototype = new CanvasGradient_;

  LinearCanvasGradient_.prototype.createBrush_ = function(ctx) {
    var brushObj = create(ctx, '<LinearGradientBrush MappingMode="Absolute" ' +
                          'StartPoint="%1,%2" EndPoint="%3,%4"/>',
                          [this.x0_, this.y0_, this.x1_, this.y1_]);
    this.createStops_(ctx, brushObj, this.colors_);
    return brushObj;
  };

  function isNanOrInfinite(v) {
    return isNaN(v) || !isFinite(v);
  }

  function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) {
    if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) ||
        isNanOrInfinite(x1) || isNanOrInfinite(y1)) {
      // IE does not support DOMException so this is as close as we get.
      var error = Error('DOMException.INDEX_SIZE_ERR');
      error.code = 1;
      throw error;
    }

    CanvasGradient_.call(this);
    this.x0_ = x0;
    this.y0_ = y0;
    this.r0_ = r0;
    this.x1_ = x1;
    this.y1_ = y1;
    this.r1_ = r1;
  }
  RadialCanvasGradient_.prototype = new CanvasGradient_;

  CanvasGradient_.prototype.createBrush_ = function(ctx) {
    if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) {
      return null;
    }

    var radius = Math.max(this.r0_, this.r1_);
    var minRadius = Math.min(this.r0_, this.r1_);
    var brushObj = create(ctx, '<RadialGradientBrush MappingMode="Absolute" ' +
                          'GradientOrigin="%1,%2" Center="%3,%4" ' +
                          'RadiusX="%5" RadiusY="%5"/>',
                          [this.x0_, this.y0_, this.x1_, this.y1_, radius]);

    var colors = this.colors_.concat();

    if (this.r1_ < this.r0_) {
      // reverse color stop array
      colors.reverse();
      for (var i = 0, c; c = colors[i]; i++) {
        c.offset = 1 - c.offset;
      }
    }

    // sort the color stops
    colors.sort(function(c1, c2) {
      return c1.offset - c2.offset;
    });

    if (minRadius > 0) {
      // We need to adjust the color stops since SL always have the inner radius
      // at (0, 0) so we change the stops in case the min radius is not 0.
      for (var i = 0, c; c = colors[i]; i++) {
        c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset;
      }
    }

    this.createStops_(ctx, brushObj, colors);
    return brushObj;
  };

  function CanvasPattern_() {}

  // set up externs
  G_vmlCanvasManager = G_vmlCanvasManager_;
  CanvasRenderingContext2D = CanvasRenderingContext2D_;
  CanvasGradient = CanvasGradient_;
  CanvasPattern = CanvasPattern_;

})();

} // if

Show details Hide details

Change log

r45 by erik.arvidsson on Mar 02, 2009 Diff

Move files around to match SVN directory
structure.

Go to:

Project members, sign in to write a code review

Older revisions

r36 by eonics on Mar 08, 2008 Diff

SL: Fixed an issue in bezierCurveTo
which caused an exception in stroke-
should-not-close-path.html

r31 by eonics on Feb 10, 2008 Diff

SL: Improved radial gradients.  They
now behave as Safari and Opera for
anything but extreme values, which no
browser renders the same any way.

r30 by eonics on Feb 08, 2008 Diff

Add one missing trailing semi colon
and change to use ' instead of "

All revisions of this file

File info

Size: 22344 bytes, 770 lines

View raw file