λ-wiki

λ-wiki :: paint

www!k! v.20120610

λ-wiki :: éditeur

{h1 paint et {a pencil}}

{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 ! "Clear" doesn't work)}

{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:30px; value:0;}}} 
   {td green : {input {@ id:green; code:code; width:30px; value:0;}}} 
   {td blue :  {input {@ id:blue; code:code; width:30px; value:255;}}} 
}
{tr 
   {td size : {input {@ id:size; width:30px; value:20;}}} 
   {td grid : {input {@ id:grid; width:30px; value:10;}}} 
   {td        {@ id:colorSquare; background:blue;} } 
}
{tr 
   {@ text-align:center;}
   {td {submit {@ id:initButton;  code:code; value:init;}}} 
   {td {submit {@ id:saveButton;  code:code; value:save;}}} 
   {td {submit {@ id:clearButton; code:code; value:clear;}}} 
}
}

{div {@ margin-top:10px; } {canvas {@ id:myCanvas; width:800; height:300; border:1px solid grey;}}}

{h6 code }
{pre {@ id:code;} °° 
//  adaptation d'un code écrit par ??? (à retrouver)
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;
}

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

°°}