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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
| $(document).ready(function() {
// Variables :
var color = "#000";
var painting = false;
var started = false;
var width_brush = 5;
var canvas = $("#canvas");
var cursorX, cursorY;
var restoreCanvasArray = [];
var restoreCanvasIndex = 0;
var context = canvas[0].getContext('2d');
// Trait arrondi :
context.lineJoin = 'round';
context.lineCap = 'round';
// Click souris enfoncé sur le canvas, je dessine :
canvas.mousedown(function(e) {
painting = true;
// Coordonnées de la souris :
cursorX = (e.pageX - this.offsetLeft);
cursorY = (e.pageY - this.offsetTop);
});
// Relachement du Click sur tout le document, j'arrête de dessiner :
$(this).mouseup(function() {
painting = false;
started = false;
});
// Mouvement de la souris sur le canvas :
canvas.mousemove(function(e) {
// Si je suis en train de dessiner (click souris enfoncé) :
if (painting) {
// Set Coordonnées de la souris :
cursorX = (e.pageX - this.offsetLeft) - 10; // 10 = décalage du curseur
cursorY = (e.pageY - this.offsetTop) - 10;
// Dessine une ligne :
drawLine();
}
});
// Fonction qui dessine une ligne :
function drawLine() {
// Si c'est le début, j'initialise
if (!started) {
// Je place mon curseur pour la première fois :
context.beginPath();
context.moveTo(cursorX, cursorY);
started = true;
}
// Sinon je dessine
else {
context.lineTo(cursorX, cursorY);
context.strokeStyle = color;
context.lineWidth = width_brush;
context.stroke();
}
}
// Clear du Canvas :
function clear_canvas() {
context.clearRect(0,0, canvas.width(), canvas.height());
}
// Pour chaque carré de couleur :
$("#couleurs a").each(function() {
// Je lui attribut une couleur de fond :
$(this).css("background", $(this).attr("data-couleur"));
// Et au click :
$(this).click(function() {
// Je change la couleur du pinceau :
color = $(this).attr("data-couleur");
// Et les classes CSS :
$("#couleurs a").removeAttr("class", "");
$(this).attr("class", "actif");
return false;
});
});
// Largeur du pinceau :
$("#largeurs_pinceau input").change(function() {
if (!isNaN($(this).val())) {
width_brush = $(this).val();
$("#output").html($(this).val() + " pixels");
}
});
// Bouton Reset :
$("#reset").click(function() {
// Clear canvas :
clear_canvas();
// Valeurs par défaut :
$("#largeur_pinceau").attr("value", 5);
width_brush = 5;
$("#output").html("5 pixels");
});
// Bouton Save :
$("#save").click(function() {
var canvas_tmp = document.getElementById("canvas"); // Ca merde en pernant le selecteur jQuery
window.location = canvas_tmp.toDataURL("image/png");
});
}); |
Partager