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
121
|
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
rubberbandDiv = document.getElementById('rubberbandDiv'),
resetButton = document.getElementById('resetButton'),
image = new Image(),
mousedown = {},
rubberbandRectangle = {},
dragging = false;
// Functions..........................................................
function rubberbandStart(x, y) {
mousedown.x = x;
mousedown.y = y;
rubberbandRectangle.left = mousedown.x;
rubberbandRectangle.top = mousedown.y;
moveRubberbandDiv();
showRubberbandDiv();
dragging = true;
}
function rubberbandStretch(x, y) {
rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;
rubberbandRectangle.width = Math.abs(x - mousedown.x),
rubberbandRectangle.height = Math.abs(y - mousedown.y);
moveRubberbandDiv();
resizeRubberbandDiv();
}
function rubberbandEnd() {
var bbox = canvas.getBoundingClientRect();
try {
context.drawImage(canvas,
rubberbandRectangle.left - bbox.left,
rubberbandRectangle.top - bbox.top,
rubberbandRectangle.width,
rubberbandRectangle.height,
0, 0, canvas.width, canvas.height);
}
catch (e) {
// Suppress error message when mouse is released
// outside the canvas
}
resetRubberbandRectangle();
rubberbandDiv.style.width = 0;
rubberbandDiv.style.height = 0;
hideRubberbandDiv();
dragging = false;
}
function moveRubberbandDiv() {
rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}
function resizeRubberbandDiv() {
rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}
function showRubberbandDiv() {
rubberbandDiv.style.display = 'inline';
}
function hideRubberbandDiv() {
rubberbandDiv.style.display = 'none';
}
function resetRubberbandRectangle() {
rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 };
}
// Event handlers.....................................................
canvas.onmousedown = function (e) {
var x = e.clientX,
y = e.clientY;
e.preventDefault();
rubberbandStart(x, y);
};
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
e.preventDefault();
if (dragging) {
rubberbandStretch(x, y);
}
};
window.onmouseup = function (e) {
e.preventDefault();
rubberbandEnd();
};
image.onload = function () {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
resetButton.onclick = function(e) {
context.clearRect(0, 0, context.canvas.width,
context.canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
// Initialization.....................................................
image.src = 'curved-road.png';
|
