+
1
|
list
|
skin
|
login
|
editor
α-wwwiki
::
paint
user:none
(11009 bytes)
_h1 paint & [[pencil]] _p Here is a test of an interactive pencil. The code is from an unknown author slightly adapted for alphawiki. By default, the pen has a size of 20 pixels, a blue color "rgb(0,0,255)" and is constrained to a grid of 10 pixel. These values can be edited in the table's cells below. Click on the "init paint" button to activate the tool, on the "clear" button to clear the canvas and on the "save" button to save a "png" image of the work, which will be displayed in another window of the browser. {table {@ style="text-align:right; border:1px solid black; box-shadow:2px 2px 2px black; width:600px;"} {tr {td red : {input {@ id="red" type="text" value="0" style="width:30px;"}}} {td green : {input {@ id="green" type="text" value="0" style="width:30px;"}}} {td blue : {input {@ id="blue" type="text" value="255" style="width:30px;"}}} } {tr {td size : {input {@ id="size" type="text" value="20" style="width:30px;"}}} {td grid : {input {@ id="grid" type="text" value="10" style="width:30px;"}}} {td {@ id="colorSquare" style="background:blue;"}} }} {input {@ id="saveButton" type="submit" value="save"}} {input {@ id="clearButton" type="submit" value="clear"}} {canvas {@ id="myCanvas" width="600" height="300" style="border:1px solid grey" }} {input {@ type="submit" value="init paint" onclick="°° // code's author unknown slightly adapted for integration in alphawiki 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 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 getId('red').addEventListener('keyup', function(evt){ updateColorSquare(); }, false); getId('green').addEventListener('keyup', function(evt){ updateColorSquare(); }, false); getId('blue').addEventListener('keyup', function(evt){ updateColorSquare(); }, false); getId('clearButton').addEventListener('click', function(evt){ events.clear(); points = []; canvasImg = getCanvasImg(canvas); }, false); // open new window with saved image so user, can right click and save to their computer getId('saveButton').addEventListener('click', function(evt){ window.open(canvas.toDataURL()); }, false); // attach listeners to canvas canvas.addEventListener('mousedown', function(){ // update drawing params red = getId('red').value; green = getId('green').value; blue = getId('blue').value; size = getId('size').value; g_grid = getId('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); } }); }; init(); °°"}}