BitmapData.js/rotozoomer.html at master · pnitsch/BitmapData.js · GitHub

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
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Rotozoomer Example</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/global.css" type="text/css" />
		<script type="text/javascript" src="js/Point.js"></script>
		<script type="text/javascript" src="js/Rectangle.js"></script>
		<script type="text/javascript" src="js/Matrix.js"></script>
		<script type="text/javascript" src="js/BitmapData.js"></script>
		<script>
			function init(){
				bmd = document.getElementById("canvas").bitmapData;

				lenna = new Image();
				lenna.src = "res/lenna-300x300.png";

				clipping = new Rectangle(10, 10, 280, 280);
				rotoMatrix = new Matrix(1, 0, 0, 1, 150, 150);

				zoomMax = 0.2;
				zoomMin = -0.4;
				dz = 0.015;
				dr= 0.01;
				angle = 0;
				zoom = zoomMin;
				isZoomIncreasing = true;

				setInterval(function() {
					if ( isZoomIncreasing )	zoom = zoom + dz;
					else zoom = zoom - dz;

					angle = angle + dr;

					if ( angle > 360 ) angle = 0;

					if ( zoom > zoomMax ) {
						isZoomIncreasing = false;
						zoom = zoomMax;
					} else if ( zoom < zoomMin ) {
						isZoomIncreasing = true;
						zoom = zoomMin;
					}

					rotoMatrix.a = Math.cos(angle) * zoom;
					rotoMatrix.b = Math.sin(angle);
					rotoMatrix.c = -Math.sin(angle);
					rotoMatrix.d = Math.cos(angle) * zoom;


					bmd.draw(lenna, rotoMatrix, null, null, null);
				}, 20);
			};
		</script>
	</head>
	<body onload="init();">
		<div id="container">
			<div id="example-container">
				<div id="example">
					<canvas id="canvas" width="300" height="300"></canvas>
					<img id="lenna" src="res/lenna-300x300.png" width="300" height="300" />
				</div>
				<div id="code">
					<pre>bmd = document.getElementById("canvas").bitmapData;

lenna = new Image();
lenna.src = "res/lenna-300x300.png";

clipping = new Rectangle(10, 10, 280, 280);
rotoMatrix = new Matrix(1, 0, 0, 1, 150, 150);

zoomMax = 0.2;
zoomMin = -0.4;
dz = 0.015;
dr= 0.01;
angle = 0;
zoom = zoomMin;
isZoomIncreasing = true;

setInterval(function() {
	if ( isZoomIncreasing )	zoom = zoom + dz;
	else zoom = zoom - dz;

	angle = angle + dr;

	if ( angle > 360 ) angle = 0;

	if ( zoom > zoomMax ) {
		isZoomIncreasing = false;
		zoom = zoomMax;
	} else if ( zoom < zoomMin ) {
		isZoomIncreasing = true;
		zoom = zoomMin;
	}

	rotoMatrix.a = Math.cos(angle) * zoom;
	rotoMatrix.b = Math.sin(angle);
	rotoMatrix.c = -Math.sin(angle);
	rotoMatrix.d = Math.cos(angle) * zoom;


	bmd.draw(lenna, rotoMatrix, null, null, null);
}, 20);	</pre>
				</div>
			</div>
			<div class="break"><img src="res/break.gif"></div>
			<div id="links">
				<ul>
					<li><a href="index.html">back</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>