forked from bencentra/canvas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas4.html
152 lines (138 loc) · 3.67 KB
/
canvas4.html
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Click, Drag, and Zoom</title>
<style>
* {
font-family: Arial, sans-serif;
}
#myCanvas {
border: 1px solid gray;
width: 960px;
height: 600px;
margin: auto;
cursor: move;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// Canvas
var mouseDown = false;
var mousePos = [0, 0];
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousewheel", zoom, false);
canvas.addEventListener("mousedown", setMouseDown, false);
canvas.addEventListener("mouseup", setMouseUp, false);
canvas.addEventListener("mousemove", move, false);
// Defaults
var DEFAULT_ZOOM = .5;
var MAX_ZOOM = 3;
var MIN_ZOOM = .2;
var ZOOM_STEP = .1;
// var DRAW_POS = [0, 0];
var DRAW_POS = [canvas.width/2, canvas.height/2];
// Buttons
var zoomInBtn = document.querySelector("#zoomIn");
zoomInBtn.addEventListener("click", zoomIn, false);
var zoomOutBtn = document.querySelector("#zoomOut");
zoomOutBtn.addEventListener("click", zoomOut, false);
var resetZoomBtn = document.querySelector("#resetZoom");
resetZoomBtn.addEventListener("click", resetZoom, false);
var resetPosBtn = document.querySelector("#resetPos");
resetPosBtn.addEventListener("click", resetPos, false);
// Image
var loaded = false;
var drawPos = DRAW_POS;
var scale = DEFAULT_ZOOM;
var image = new Image();
image.src = "./test.jpg";
image.addEventListener("load", function(e) {
loaded = true;
drawCanvas();
}, false);
// Draw the canvas
function drawCanvas() {
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);
if (loaded) {
drawImage();
}
}
// Draw the image
function drawImage() {
var w = image.width * scale;
var h = image.height * scale;
// var x = drawPos[0];
// var y = drawPos[1];
var x = drawPos[0] - (w / 2);
var y = drawPos[1] - (h / 2);
context.drawImage(image, x, y, w, h);
}
// Set the zoom with the mouse wheel
function zoom(e) {
if (e.wheelDelta > 0) {
zoomIn();
}
else {
zoomOut();
}
}
// Zoom in
function zoomIn(e) {
if (scale < MAX_ZOOM) {
scale += ZOOM_STEP;
drawCanvas();
}
}
// Zoom out
function zoomOut(e) {
if (scale > MIN_ZOOM) {
scale -= ZOOM_STEP;
drawCanvas();
}
}
// Reset the zoom
function resetZoom(e) {
scale = DEFAULT_ZOOM;
drawCanvas();
}
// Reset the position
function resetPos(e) {
drawPos = DRAW_POS;
drawCanvas();
}
// Toggle mouse status
function setMouseDown(e) {
mouseDown = true;
mousePos = [e.x, e.y];
}
function setMouseUp(e) {
mouseDown = false;
}
// Move
function move(e) {
if (mouseDown) {
var dX = 0, dY = 0;
var delta = [e.x - mousePos[0], e.y - mousePos[1]];
drawPos = [drawPos[0] + delta[0], drawPos[1] + delta[1]];
mousePos = [e.x, e.y];
drawCanvas();
}
}
}, true);
</script>
</head>
<body>
<h2>Canvas Click, Drag, and Zoom</h2>
<canvas id="myCanvas" width="960" height="600">
Your browser doesn't support canvas, fool.
</canvas>
<p>Click and drag to move the image. <button type="button" id="resetPos">Reset Position</button></p>
<p>Zoom:
<button type="button" id="zoomIn">Zoom In (+)</button>
<button type="button" id="zoomOut">Zoom Out (-)</button>
<button type="button" id="resetZoom">Reset Zoom</button>
</p>
</body>
</html>