Changeset 24

Show
Ignore:
Timestamp:
02/05/06 11:18:05 (2 years ago)
Author:
al
Message:

syncing with latest svn from excanvas

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • plotkit/trunk/PlotKit/excanvas.js

    r18 r24  
    1616// TODO: Radial gradient 
    1717// TODO: Clipping paths 
    18 // TODO: Coordsize 
     18// TODO: Coordsize (still need to support stretching) 
    1919// TODO: Painting mode 
    2020// TODO: Optimize 
    2121// TODO: canvas width/height sets content size in moz, border size in ie 
    22 // TODO: Painting outside the canvas should not be allowed 
    2322 
    2423// only add this code if we do not already have a canvas implementation 
    …… 
    2625 
    2726(function () { 
     27 
     28  // alias some functions to make (compiled) code shorter 
     29  var m = Math; 
     30  var mr = m.round; 
     31  var ms = m.sin; 
     32  var mc = m.cos; 
    2833 
    2934  var G_vmlCanvasManager_ = { 
    …… 
    8792     * Public initializes a canvas element so that it can be used as canvas 
    8893     * element from now on. This is called automatically before the page is 
    89      * loaded but if you are creating elements using createElement yuo need to 
     94     * loaded but if you are creating elements using createElement you need to 
    9095     * make sure this is called on the element. 
    91      * @param el {HTMLElement} The canvas element to initialize. 
     96     * @param {HTMLElement} el The canvas element to initialize. 
     97     * @return {HTMLElement} the element that was created. 
    9298     */ 
    9399    initElement: function (el) { 
    …… 
    100106      }; 
    101107 
    102       var self = this; //bind 
    103       el.attachEvent("onpropertychange", function (e) { 
    104         // we need to watch changes to width and height 
    105         switch (e.propertyName) { 
    106           case "width": 
    107           case "height": 
    108             // coord size changed? 
    109             break; 
    110         } 
    111       }); 
    112  
    113       // if style.height is set 
     108      // do not use inline function because that will leak memory 
     109      // el.attachEvent('onpropertychange', onPropertyChange) 
     110      el.attachEvent('onresize', onResize); 
    114111 
    115112      var attrs = el.attributes; 
    …… 
    128125    } 
    129126  }; 
     127 
     128  function onPropertyChange(e) { 
     129    // we need to watch changes to width and height 
     130    switch (e.propertyName) { 
     131      case 'width': 
     132      case 'height': 
     133        // TODO: coordsize and size 
     134        break; 
     135    } 
     136  } 
     137 
     138  function onResize(e) { 
     139    var el = e.srcElement; 
     140    if (el.firstChild) { 
     141      el.firstChild.style.width =  el.clientWidth + 'px'; 
     142      el.firstChild.style.height = el.clientHeight + 'px'; 
     143    } 
     144  } 
    130145 
    131146  G_vmlCanvasManager_.init(); 
    …… 
    216231   * This class implements CanvasRenderingContext2D interface as described by 
    217232   * the WHATWG. 
    218    * @param surfaceElement {HTMLElement} The element that the 2D context should 
     233   * @param {HTMLElement} surfaceElement The element that the 2D context should 
    219234   * be associated with 
    220235   */ 
    221236   function CanvasRenderingContext2D_(surfaceElement) { 
    222237    this.m_ = createMatrixIdentity(); 
    223     this.element_ = surfaceElement; 
    224238 
    225239    this.mStack_ = []; 
    …… 
    236250    this.miterLimit = 10; 
    237251    this.globalAlpha = 1; 
     252 
     253    var el = document.createElement('div'); 
     254    el.style.width =  surfaceElement.clientWidth + 'px'; 
     255    el.style.height = surfaceElement.clientHeight + 'px'; 
     256    el.style.overflow = 'hidden'; 
     257    el.style.position = 'absolute'; 
     258    surfaceElement.appendChild(el); 
     259 
     260    this.element_ = el; 
    238261  }; 
    239262 
    …… 
    285308    } 
    286309 
    287     var xStart = aX + (Math.cos(aStartAngle) * aRadius); 
    288     var yStart = aY + (Math.sin(aStartAngle) * aRadius); 
    289  
    290     var xEnd = aX + (Math.cos(aEndAngle) * aRadius); 
    291     var yEnd = aY + (Math.sin(aEndAngle) * aRadius); 
     310    aRadius *= 10; 
     311 
     312    var xStart = aX + (mc(aStartAngle) * aRadius) - 5; 
     313    var yStart = aY + (ms(aStartAngle) * aRadius) - 5; 
     314 
     315    var xEnd = aX + (mc(aEndAngle) * aRadius) - 5; 
     316    var yEnd = aY + (ms(aEndAngle) * aRadius) - 5; 
    292317 
    293318    this.currentPath_.push({type: "arc", 
    …… 
    389414    // For some reason that I've now forgotten, using divs didn't work 
    390415    vmlStr.push(' <g_vml_:group', 
    391                 ' coordsize="100,100"', 
     416                ' coordsize="1000,1000"', 
    392417                ' coordorigin="0, 0"' , 
    393418                ' style="width:100px;height:100px;position:absolute;'); 
    …… 
    419444      max.y = Math.max(max.y, c2.y, c3.y, c4.y); 
    420445 
    421       vmlStr.push(" padding:0 ", Math.floor(max.x), "px ", Math.floor(max.y), 
     446      vmlStr.push(" padding:0 ", mr(max.x), "px ", mr(max.y), 
    422447                  "px 0;filter:progid:DXImageTransform.Microsoft.Matrix(", 
    423448                  filter.join(""), ", sizingmethod='clip');") 
    …… 
    452477                 ' filled="', Boolean(aFill), '"', 
    453478                 ' style="position:absolute;width:10;height:10;"', 
    454                  ' coordorigin="0 0" coordsize="10 10"', 
     479                 ' coordorigin="0 0" coordsize="100 100"', 
    455480                 ' stroked="', !aFill, '"', 
    456481                 ' strokeweight="', this.lineWidth, '"', 
    …… 
    468493        lineStr.push(" m "); 
    469494        var c = this.getCoords_(p.x, p.y); 
    470         lineStr.push(Math.floor(c.x), ",", Math.floor(c.y)); 
     495        lineStr.push(mr(c.x), ",", mr(c.y)); 
    471496      } else if (p.type == "lineTo") { 
    472497        lineStr.push(" l "); 
    473498        var c = this.getCoords_(p.x, p.y); 
    474         lineStr.push(Math.floor(c.x), ",", Math.floor(c.y)); 
     499        lineStr.push(mr(c.x), ",", mr(c.y)); 
    475500      } else if (p.type == "close") { 
    476501        lineStr.push(" x "); 
    …… 
    480505        var c1 = this.getCoords_(p.cp1x, p.cp1y); 
    481506        var c2 = this.getCoords_(p.cp2x, p.cp2y); 
    482         lineStr.push(Math.floor(c1.x), ",", Math.floor(c1.y), ",", 
    483                      Math.floor(c2.x), ",", Math.floor(c2.y), ",", 
    484                      Math.floor(c.x), ",", Math.floor(c.y)); 
     507        lineStr.push(mr(c1.x), ",", mr(c1.y), ",", 
     508                     mr(c2.x), ",", mr(c2.y), ",", 
     509                     mr(c.x), ",", mr(c.y)); 
    485510      } else if (p.type == "arc") { 
    486511        lineStr.push(" ar "); 
    …… 
    495520        var absYScale = this.m_[1][1]; 
    496521 
    497         lineStr.push(Math.floor(c.x - absXScale * p.radius), ",", 
    498                      Math.floor(c.y - absYScale * p.radius), " ", 
    499                      Math.floor(c.x + absXScale * p.radius), ",", 
    500                      Math.floor(c.y + absYScale * p.radius), " ", 
    501                      Math.floor(cStart.x), ",", Math.floor(cStart.y), " ", 
    502                      Math.floor(cEnd.x), ",", Math.floor(cEnd.y)); 
     522        lineStr.push(mr(c.x - absXScale * p.radius), ",", 
     523                     mr(c.y - absYScale * p.radius), " ", 
     524                     mr(c.x + absXScale * p.radius), ",", 
     525                     mr(c.y + absYScale * p.radius), " ", 
     526                     mr(cStart.x), ",", mr(cStart.y), " ", 
     527                     mr(cEnd.x), ",", mr(cEnd.y)); 
    503528      } 
    504529 
    …… 
    532557      var dimension = (width > height) ? width : height; 
    533558 
    534       focus.x = Math.floor((this.fillStyle.focus_.x / width) * 100 + 50) + "%"; 
    535       focus.y = Math.floor((this.fillStyle.focus_.y / height) * 100 + 50) + "%"; 
     559      focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%"; 
     560      focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%"; 
    536561 
    537562      var colors = []; 
    …… 
    615640  contextPrototype.getCoords_ = function(aX, aY) { 
    616641    return { 
    617       x: (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]), 
    618       y: (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) 
     642      x: 10 * (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]) - 5, 
     643      y: 10 * (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) - 5 
    619644    } 
    620645  }; 
    …… 
    644669 
    645670  contextPrototype.rotate = function(aRot) { 
    646     var c = Math.cos(aRot); 
    647     var s = Math.sin(aRot); 
     671    var c = mc(aRot); 
     672    var s = ms(aRot); 
    648673 
    649674    var m1 = [