λ-wiki

λ-wiki :: pencil

www!k! v.20120610

λ-wiki :: éditeur

{h1 pencil et {a paint}}
{canvas {@ id:canvas; width:800; height:300; border:1px solid blue;} }
{p {submit {@ code:code; color:red; value:init pencil; }} 
{span {@ border:1px solid grey; padding:2px;} grid : {input {@ id:grid; code:code; value:10; background:#ccc; width:50px; text-align:center;}}}}

{pre {@ id:code;} °°
initpencil();
//  gestion des décalages du curseur
function relMouseCoords(event){
   var totalOffsetX = 0, totalOffsetY = 0, canvasX = 0, canvasY = 0;   
   var currentElement = this;
   do { totalOffsetX += currentElement.offsetLeft;
        totalOffsetY += currentElement.offsetTop;
   }
   while(currentElement = currentElement.offsetParent)
   canvasX = event.pageX - totalOffsetX;
   canvasY = event.pageY - totalOffsetY;
   return { x:canvasX, y:canvasY }
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

function initpencil() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var grid = document.getElementById("grid").value;
  var x, y;
  ctx.fillStyle = "black";
  ctx.beginPath();

°°°
   à mettre au point
// sur iPhone/iPad :
	canvas.ontouchstart = function(e) {
		var first = e.changedTouches[0];	// tablet
		x = first.clientX - canvas.offsetLeft;
		y = first.clientY - canvas.offsetTop;
		ctx.moveTo(x, y);
	}
	canvas.ontouchend = function(e) {
		x = y = null;
	}
	canvas.ontouchmove = function(e) {
	  if (x == null || y == null) return;
		var first = e.changedTouches[0];	// tablet
		x = first.pageX - canvas.offsetLeft;
		y = first.pageY - canvas.offsetTop;
		ctx.lineTo(x, y);
		ctx.stroke();
		ctx.moveTo(x, y);
	}
°°°