2012/04/26 09:44:00 | (127.0.0.1) 
{h1 paint}

{p Intégration dans lambdawiki d'un "crayon" interactif adapté du code de xxx. Par défaut le crayon a une épaisseur (size) de 20 pixels, une couleur bleue rgb(0,0,255) et se déplace sur une grille de 10 pixels. Ces valeurs sont modifiables en entrant les valeurs souhaitées dans les cellules du tableau ci-dessous. Cliquer sur le bouton "init" pour activer l'outil, sur le bouton "clear" pour tout effacer et sur le bouton "save" pour conserver une image (png) du résultat.}
{p Un simple essai en phase test !}

{table text-align:right; border:1px solid black; 
box-shadow:2px 2px 2px black; width:800px;
|
{tr 
   {td red : {input id:red; code:code; width:200;|0}} 
   {td green : {input id:green; code:code; width:200;|0}} 
   {td blue : {input id:blue; code:code; width:200;|255}} 
}
{tr 
   {td size : {input id:size; width:200;|20}} 
   {td grid : {input id:grid; width:200;|10}} 
   {td id:colorSquare; background:blue; | } 
}
{tr text-align:center;|
   {td {submit id:initButton;  code:code; | init }} 
   {td {submit id:saveButton;  code:code; | save }} 
   {td {submit id:clearButton; code:code; | clear }} 
}
}

{div margin-top:10px; |{canvas id:myCanvas; width:800; height:600; | }}

{h6 code }
{pre id:code; |_!! 
//  adaptation d'un code écrit par xxx
var Events = function(canvasId){

    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext("2d");

    this.stage = undefined;
    this.listening = false;
    
    // desktop flags
    this.mousePos = null;
    this.mouseDown = false;
    this.mouseUp = false;
    this.mouseOver = false;
    this.mouseMove = false;
    
    // mobile flags
    this.touchPos = null;
    this.touchStart = false;
    this.touchMove = false;
    this.touchEnd = false;
    
    // Region Events
    this.currentRegion = null;
    this.regionIndex = 0;
    this.lastRegionIndex = -1;
    this.mouseOverRegionIndex = -1;
};

// ======================================= GENERAL =======================================

Events.prototype.getContext = function(){
    return this.context;
};

Events.prototype.getCanvas = function(){
    return this.canvas;
};

Events.prototype.clear = function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

Events.prototype.getCanvasPos = function(){
    var obj = this.getCanvas();
    var top = 0;
    var left = 0;
    while (obj.tagName != "BODY") {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
    return {
        top: top,
        left: left
    };
};

Events.prototype.setStage = function(func){
    this.stage = func;
    this.listen();
};

// ======================================= CANVAS EVENTS =======================================

Events.prototype.reset = function(evt){
    if (!evt) {
        evt = window.event;
    }
    
    this.setMousePosition(evt);
    this.setTouchPosition(evt);
    this.regionIndex = 0;
    
    if (this.stage !== undefined) {
        this.stage();
    }
    
    // desktop flags
    this.mouseOver = false;
    this.mouseMove = false;
    this.mouseDown = false;
    this.mouseUp = false;
    
    // mobile touch flags
    this.touchStart = false;
    this.touchMove = false;
    this.touchEnd = false;
};

Events.prototype.listen = function(){
    var that = this;
    
    if (this.stage !== undefined) {
        this.stage();
    }
    
    // desktop events
    this.canvas.addEventListener("mousedown", function(evt){
        that.mouseDown = true;
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mousemove", function(evt){
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mouseup", function(evt){
        that.mouseUp = true;
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mouseover", function(evt){
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("mouseout", function(evt){
        that.mousePos = null;
    }, false);
    
    // mobile events
    this.canvas.addEventListener("touchstart", function(evt){
        evt.preventDefault();
        that.touchStart = true;
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("touchmove", function(evt){
        evt.preventDefault();
        that.reset(evt);
    }, false);
    
    this.canvas.addEventListener("touchend", function(evt){
        evt.preventDefault();
        that.touchEnd = true;
        that.reset(evt);
    }, false);
};

Events.prototype.getMousePos = function(evt){
    return this.mousePos;
};

Events.prototype.getTouchPos = function(evt){
    return this.touchPos;
};

Events.prototype.setMousePosition = function(evt){
    var mouseX = evt.clientX - this.getCanvasPos().left + window.pageXOffset;
    var mouseY = evt.clientY - this.getCanvasPos().top + window.pageYOffset;
    this.mousePos = {
        x: mouseX,
        y: mouseY
    };
};

Events.prototype.setTouchPosition = function(evt){
    if (evt.touches !== undefined && evt.touches.length == 1) { // Only deal with one finger
        var touch = evt.touches[0]; // Get the information for finger #1
        var touchX = touch.pageX - this.getCanvasPos().left + window.pageXOffset;
        var touchY = touch.pageY - this.getCanvasPos().top + window.pageYOffset;
        
        this.touchPos = {
            x: touchX,
            y: touchY
        };
    }
};

// ======================================= REGION EVENTS =======================================

Events.prototype.beginRegion = function(){
    this.currentRegion = {};
    this.regionIndex++;
};

Events.prototype.addRegionEventListener = function(type, func){
    var event = (type.indexOf('touch') == -1) ? 'on' + type : type;
    this.currentRegion[event] = func;
};

Events.prototype.closeRegion = function(){
    var pos = this.touchPos || this.mousePos;
    
    if (pos !== null && this.context.isPointInPath(pos.x, pos.y)) {
        if (this.lastRegionIndex != this.regionIndex) {
            this.lastRegionIndex = this.regionIndex;
        }
        
        // handle onmousedown
        if (this.mouseDown && this.currentRegion.onmousedown !== undefined) {
            this.currentRegion.onmousedown();
            this.mouseDown = false;
        }
        
        // handle onmouseup
        else if (this.mouseUp && this.currentRegion.onmouseup !== undefined) {
            this.currentRegion.onmouseup();
            this.mouseUp = false;
        }
        
        // handle onmouseover
        else if (!this.mouseOver && this.regionIndex != this.mouseOverRegionIndex && this.currentRegion.onmouseover !== undefined) {
            this.currentRegion.onmouseover();
            this.mouseOver = true;
            this.mouseOverRegionIndex = this.regionIndex;
        }
        
        // handle onmousemove
        else if (!this.mouseMove && this.currentRegion.onmousemove !== undefined) {
            this.currentRegion.onmousemove();
            this.mouseMove = true;
        }
        
        // handle touchstart
        if (this.touchStart && this.currentRegion.touchstart !== undefined) {
            this.currentRegion.touchstart();
            this.touchStart = false;
        }
        
        // handle touchend
        if (this.touchEnd && this.currentRegion.touchend !== undefined) {
            this.currentRegion.touchend();
            this.touchEnd = false;
        }
        
        // handle touchmove
        if (!this.touchMove && this.currentRegion.touchmove !== undefined) {
            this.currentRegion.touchmove();
            this.touchMove = true;
        }
        
    }
    else if (this.regionIndex == this.lastRegionIndex) {
        this.lastRegionIndex = -1;
        this.mouseOverRegionIndex = -1;
        
        // handle mouseout condition
        if (this.currentRegion.onmouseout !== undefined) {
            this.currentRegion.onmouseout();
        }
    }
};


function addPoint(events, points, grid){
  var context = events.getContext();
  var drawingPos = events.getMousePos();
  						// ajout d'une grille
    drawingPos.x = Math.round( drawingPos.x/g_grid )*g_grid;
    drawingPos.y = Math.round( drawingPos.y/g_grid )*g_grid;
  						// ajout d'une grille
  if (drawingPos !== null) {
      points.push(drawingPos);
  }
}

function drawPath(canvas, points, canvasImg){
  var context = canvas.getContext("2d");
  // clear canvas
  context.clearRect(0, 0, canvas.width, canvas.height);
  // redraw canvas before path
  context.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);
  // draw patch
  context.beginPath();
  context.lineTo(points[0].x, points[0].y);
  for (var n = 1; n < points.length; n++) {
      var point = points[n];
      context.lineTo(point.x, point.y);
  }
  context.stroke();
}

function updateColorSquare(){
  var red = document.getElementById("red").value;
  var green = document.getElementById("green").value;
  var blue = document.getElementById("blue").value;
  var colorSquare = document.getElementById("colorSquare");
  colorSquare.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
}

function getCanvasImg(canvas){
  var img = new Image();
  img.src = canvas.toDataURL();
  return img;
}

  var points = [];

  var init = function() {
  var events = new Events("myCanvas");
  var canvas = events.getCanvas();
  var context = events.getContext();
  var isMouseDown = false;
  var canvasImg = getCanvasImg(canvas);
//  var points = [];
  
  // initialize drawing params
  var red = document.getElementById("red").value;
  var green = document.getElementById("green").value;
  var blue = document.getElementById("blue").value;
  var size = document.getElementById("size").value;
  var grid = document.getElementById("grid").value;
   
  // attach listeners
  document.getElementById("red").addEventListener("keyup", function(evt){ updateColorSquare(); }, false);
  document.getElementById("green").addEventListener("keyup", function(evt){ updateColorSquare(); }, false);
  document.getElementById("blue").addEventListener("keyup", function(evt){ updateColorSquare(); }, false);
  document.getElementById("clearButton").addEventListener("click", function(evt){
      events.clear();
      points = [];
console.log( points );
      canvasImg = getCanvasImg(canvas);
  }, false);
  // open new window with saved image so user, can right click and save to their computer
  document.getElementById("saveButton").addEventListener("click", function(evt){ window.open(canvas.toDataURL()); }, false);
  // attach listeners to canvas
  canvas.addEventListener("mousedown", function(){
      // update drawing params
      red = document.getElementById("red").value;
      green = document.getElementById("green").value;
      blue = document.getElementById("blue").value;
      size = document.getElementById("size").value;
      g_grid = document.getElementById("grid").value;	// ajout d'une grille
      // start drawing path
      context.strokeStyle = "rgb(" + red + "," + green + "," + blue + ")";
      context.lineWidth = size;
      context.lineJoin = "round";
      context.lineCap = "round";
      addPoint(events, points, grid);
      isMouseDown = true;
  }, false);
  
  canvas.addEventListener("mouseup", function(){
      isMouseDown = false;
      if (points.length > 0) {
          drawPath(this, points, canvasImg);
          // reset points
          points = [];
      }
      canvasImg = getCanvasImg(this);
  }, false);
  
  canvas.addEventListener("mouseout", function(){
      if (document.createEvent) {
          var evt = document.createEvent('MouseEvents');
          evt.initEvent("mouseup", true, false);
          this.dispatchEvent(evt);
      }
      else {
          this.fireEvent("onmouseup");
      }
  }, false);
  
  events.setStage(function(){
      if (isMouseDown) {
          addPoint(this, points, grid);
          drawPath(canvas, points, canvasImg);
      }
  });
    
};

// window.onload = init();
document.getElementById("initButton").onclick = init();


!!_}