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;
} |
