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
| var started = false;
var canvas, context;
var stampId = '';
var lastColor = 'black';
var lastStampId = '';
function init() {
canvas = $('#imageView').get(0);
context = canvas.getContext('2d');
// Auto-adjust canvas size to fit window.
canvas.width = window.innerWidth - 75;
canvas.height = window.innerHeight - 75;
//$('#container').get(0).addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('click', onClick, false);
// Add events for toolbar buttons.
$('#red').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#pink').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#fuchsia').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#orange').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#yellow').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#lime').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#green').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#blue').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#purple').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#black').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#white').get(0).addEventListener('click', function(e) { onColorClick(e.target.id); }, false);
$('#cat').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
$('#dragonfly').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
$('#ladybug').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
$('#heart').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
$('#dog').get(0).addEventListener('click', function(e) { onStamp(e.target.id); }, false);
$('#fill').get(0).addEventListener('click', function(e) { onFill(); }, false);
$('#save').get(0).addEventListener('click', function(e) { onSave(); }, false);
}
function onMouseMove(ev) {
var x, y;
// Get the mouse position.
if (ev.layerX >= 0) {
// Firefox
x = ev.layerX - 50;
y = ev.layerY - 5;
}
else if (ev.offsetX >= 0) {
// Opera
x = ev.offsetX - 50;
y = ev.offsetY - 5;
}
if (!started) {
started = true;
context.beginPath();
context.moveTo(x, y);
}
else {
context.lineTo(x, y);
context.stroke();
}
$('#stats').text(x + ', ' + y);
}
function onClick(e) {
if (stampId.length > 0) {
context.drawImage($(stampId).get(0), e.pageX - 90, e.pageY - 60, 80, 80);
}
}
function onColorClick(color) {
// Start a new path to begin drawing in a new color.
context.closePath();
context.beginPath();
// Select the new color.
context.strokeStyle = color;
// Highlight selected color.
var borderColor = 'white';
if (color == 'white' || color == 'yellow') {
borderColor = 'black';
}
$('#' + lastColor).css("border", "0px dashed white");
$('#' + color).css("border", "1px dashed " + borderColor);
// Store color so we can un-highlight it next time around.
lastColor = color;
}
function onFill() {
// Start a new path to begin drawing in a new color.
context.closePath();
context.beginPath();
context.fillStyle = context.strokeStyle;
context.fillRect(0, 0, canvas.width, canvas.height);
}
function onStamp(id) {
// Update the stamp image.
stampId = '#' + id;
$(lastStampId).css("border", "0px dashed white");
$(stampId).css("border", "1px dashed black");
// Store stamp so we can un-highlight it next time around.
lastStampId = stampId;
} |
Partager