1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
| (function (){
var TousLesCanvas = document.getElementsByTagName('canvas');
var tab = new Array();
var tab_shape = new Array();
var stage, shape;
var size = document.getElementById("drawing-line-width").value;
var color = "#000";
for (var i=0; i<TousLesCanvas.length; i++) {
stage = new createjs.Stage(TousLesCanvas[i]);
tab[ TousLesCanvas[i].id ] = stage;
shape = new createjs.Shape();
tab_shape[TousLesCanvas[i].id] = shape ;
stage.addChild(shape);
console.log("stage id : "+stage.id);
TousLesCanvas[i].onmouseover = function (event) {
var oldX, oldY;
canvas_id = event.target.id;
console.log("hello man : "+canvas_id);
current_stage = tab[ canvas_id ];
current_shape = tab_shape[canvas_id];
current_stage.addEventListener("stagemousedown", handleMouseDown);
current_stage.addEventListener("stagemouseup", handleMouseUp);
/////////////////////////////////////////////////////////////////
function handleMouseDown(event) {
current_stage.addEventListener("stagemousemove", handleMouseMove);
}
/////////////////////////////////////////////////////////////////////
function handleMouseMove(event) {
if (oldX) {
current_shape.graphics.beginStroke(color)
.setStrokeStyle(size, "round")
.moveTo(oldX, oldY)
.lineTo(event.stageX, event.stageY);
current_stage.update();
}
oldX = event.stageX;
console.log("X ========" +oldX);
oldY = event.stageY;
console.log("y ========" +oldY);
}
/////////////////////////////////////////////////////////////////
function handleMouseUp(event) {
current_stage.removeEventListener("stagemousemove", handleMouseMove);
}
};
}
// end for
})();//end function |
Partager