It’s been a while without anything on this blog but not in PGF trunk.

Now you have polylines and lines. (sample) As you can see on the sample you can change renderer on the page, if you use Firefox you can switch from SVG to Canvas, same code, same look.

For fun and for showing how PGF is simple, I have created a sample for mouse drawing, you can give it a try.

Here is the full code of the drawing tool:

   1  
   2  Graphic.DrawingTool = Class.create();
   3  Object.extend(Graphic.DrawingTool.prototype, Graphic.Tool.prototype);
   4  Object.extend(Graphic.DrawingTool.prototype, {
   5    initialize: function() {  
   6      this.renderer = null;
   7      this.shape    = null;
   8    },
   9    
  10    activate: function(manager) {
  11      this.renderer = manager.renderer;
  12    },
  13    
  14    unactivate: function(manager) {
  15      this.renderer = null;
  16    }, 
  17    
  18    initDrag: function(x, y, event) { 
  19      this.polyline =  new Graphic.Polyline(this.renderer); 
  20      this.polyline.setStroke(this._randomStroke());
  21      this.polyline.addPoint(x, y); 
  22      
  23      this.renderer.add(this.polyline)
  24      this.renderer.draw();
  25    },
  26    
  27    drag: function(x, y, dx, dy, ddx, ddy, event) {    
  28      if (this.polyline) {           
  29        this.polyline.addPoint(x, y); 
  30        this.renderer.draw();
  31      }
  32    },
  33    
  34    endDrag: function(x, y, event) {
  35      if (this.polyline) {
  36        this.polyline = null;
  37      }
  38    },
  39    
  40    mouseMove: function(x, y, event) {
  41    },
  42    
  43    _randomStroke: function() {
  44      var r = Math.floor(255 * Math.random());
  45      var g = Math.floor(255 * Math.random());
  46      var b = Math.floor(255 * Math.random());
  47      var a = 128 + Math.floor(128 * Math.random()); 
  48      var w = 5 + Math.floor(5 * Math.random());
  49      return  {r: r, g: g, b: b, a: a, w: w}
  50    }
  51  });