Skip to content

Commit 6a94c8d

Browse files
shuizhongyuemingshuizhongyueming
committed
完成ch13的01到05的改写
1 parent e2f80e9 commit 6a94c8d

File tree

6 files changed

+352
-0
lines changed

6 files changed

+352
-0
lines changed

‎custom/examples/ch13/01-segment.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Segment</title>
6+
<link rel="stylesheet" href="../include/style.css">
7+
</head>
8+
<body>
9+
<header>
10+
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
11+
</header>
12+
<canvas id="canvas" width="400" height="400"></canvas>
13+
14+
<script type="module">
15+
import "../include/utils.js";
16+
import Segment from './classes/segment.js'
17+
window.onload = function () {
18+
var canvas = document.getElementById('canvas'),
19+
context = canvas.getContext('2d'),
20+
segment0 = new Segment(100, 20),
21+
segment1 = new Segment(200, 10),
22+
segment2 = new Segment(80, 40);
23+
24+
segment0.x = 100;
25+
segment0.y = 50;
26+
segment0.draw(context);
27+
28+
segment1.x = 100;
29+
segment1.y = 80;
30+
segment1.draw(context);
31+
32+
segment2.x = 100;
33+
segment2.y = 120;
34+
segment2.draw(context);
35+
};
36+
</script>
37+
</body>
38+
</html>

‎custom/examples/ch13/02-single-segment.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Segment</title>
6+
<link rel="stylesheet" href="../include/style.css">
7+
</head>
8+
<body>
9+
<header>
10+
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
11+
</header>
12+
<canvas id="canvas" width="400" height="400"></canvas>
13+
14+
<script type="module">
15+
import "../include/utils.js";
16+
import Segment from './classes/segment.js'
17+
import Slider from './classes/slider.js'
18+
19+
window.onload = function () {
20+
var canvas = document.getElementById('canvas'),
21+
context = canvas.getContext('2d'),
22+
{width, height} = canvas,
23+
segmentWidth = 100,
24+
segmentHeight = 20,
25+
segment = new Segment(segmentWidth, segmentHeight),
26+
slider = new Slider(-90, 90, 0);
27+
28+
segment.x = 100;
29+
segment.y = (height - segment.height) / 2;
30+
slider.captureMouse(canvas);
31+
slider.x = 300;
32+
slider.y = (height - slider.height) / 2;
33+
slider.onchange = draw;
34+
35+
function draw(){
36+
context.clearRect(0, 0, width, height);
37+
38+
segment.rotation = slider.value * Math.PI / 180;
39+
segment.draw(context)
40+
slider.draw(context)
41+
}
42+
43+
draw();
44+
};
45+
</script>
46+
</body>
47+
</html>

‎custom/examples/ch13/03-two-segments-1.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Segment</title>
6+
<link rel="stylesheet" href="../include/style.css">
7+
</head>
8+
<body>
9+
<header>
10+
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
11+
</header>
12+
<canvas id="canvas" width="400" height="400"></canvas>
13+
14+
<script type="module">
15+
import "../include/utils.js";
16+
import Segment from './classes/segment.js'
17+
import Slider from './classes/slider.js'
18+
19+
window.onload = function () {
20+
var canvas = document.getElementById('canvas'),
21+
context = canvas.getContext('2d'),
22+
{width, height} = canvas,
23+
segment1 = new Segment(100, 20),
24+
slider1 = new Slider(-90, 90, 0),
25+
segment2 = new Segment(100, 20),
26+
slider2 = new Slider(-90, 90, 0);
27+
28+
segment1.x = 50;
29+
segment1.y = (height - segment1.height) / 2;
30+
slider1.x = 300;
31+
slider1.y = (height - slider1.height) / 2;
32+
slider1.captureMouse(canvas);
33+
slider1.onchange = draw;
34+
35+
slider2.x = 350;
36+
slider2.y = (height - slider2.height) / 2;
37+
slider2.captureMouse(canvas);
38+
slider2.onchange = draw;
39+
40+
function draw(){
41+
context.clearRect(0, 0, width, height);
42+
43+
segment1.rotation = slider1.value * Math.PI / 180;
44+
const pin = segment1.getPin()
45+
46+
segment2.x = pin.x;
47+
segment2.y = pin.y;
48+
segment2.rotation = slider2.value * Math.PI / 180;
49+
50+
segment1.draw(context)
51+
slider1.draw(context)
52+
segment2.draw(context)
53+
slider2.draw(context)
54+
}
55+
56+
draw();
57+
};
58+
</script>
59+
</body>
60+
</html>

‎custom/examples/ch13/04-two-segments-2.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Segment</title>
6+
<link rel="stylesheet" href="../include/style.css">
7+
</head>
8+
<body>
9+
<header>
10+
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
11+
</header>
12+
<canvas id="canvas" width="400" height="400"></canvas>
13+
14+
<script type="module">
15+
import "../include/utils.js";
16+
import Segment from './classes/segment.js'
17+
import Slider from './classes/slider.js'
18+
19+
window.onload = function () {
20+
var canvas = document.getElementById('canvas'),
21+
context = canvas.getContext('2d'),
22+
{width, height} = canvas,
23+
segment1 = new Segment(100, 20),
24+
slider1 = new Slider(-90, 90, 0),
25+
segment2 = new Segment(100, 20),
26+
slider2 = new Slider(-160, 0, 0);
27+
28+
segment1.x = 50;
29+
segment1.y = (height - segment1.height) / 2;
30+
slider1.x = 300;
31+
slider1.y = (height - slider1.height) / 2;
32+
slider1.captureMouse(canvas);
33+
slider1.onchange = draw;
34+
35+
slider2.x = 350;
36+
slider2.y = (height - slider2.height) / 2;
37+
slider2.captureMouse(canvas);
38+
slider2.onchange = draw;
39+
40+
function draw(){
41+
context.clearRect(0, 0, width, height);
42+
43+
segment1.rotation = slider1.value * Math.PI / 180;
44+
const pin = segment1.getPin()
45+
46+
segment2.x = pin.x;
47+
segment2.y = pin.y;
48+
segment2.rotation = segment1.rotation + slider2.value * Math.PI / 180;
49+
50+
segment1.draw(context)
51+
slider1.draw(context)
52+
segment2.draw(context)
53+
slider2.draw(context)
54+
}
55+
56+
draw();
57+
};
58+
</script>
59+
</body>
60+
</html>

‎custom/examples/ch13/05-walking-1.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Segment</title>
6+
<link rel="stylesheet" href="../include/style.css">
7+
</head>
8+
<body>
9+
<header>
10+
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
11+
</header>
12+
<canvas id="canvas" width="400" height="400"></canvas>
13+
14+
<script type="module">
15+
import "../include/utils.js";
16+
import Segment from './classes/segment.js'
17+
18+
window.onload = function () {
19+
var canvas = document.getElementById('canvas'),
20+
context = canvas.getContext('2d'),
21+
{width, height} = canvas,
22+
segment1 = new Segment(100, 20),
23+
segment2 = new Segment(100, 20);
24+
25+
let circle = 0,
26+
angleSpeed = 0.02;
27+
segment1.x = 150;
28+
segment1.y = (height - segment1.height) / 2;
29+
30+
(function draw(){
31+
requestAnimationFrame(draw)
32+
context.clearRect(0, 0, width, height);
33+
34+
circle += angleSpeed;
35+
const angle = Math.sin(circle) * 90 * Math.PI /180;
36+
37+
segment1.rotation = angle;
38+
const pin = segment1.getPin()
39+
40+
segment2.x = pin.x;
41+
segment2.y = pin.y;
42+
segment2.rotation = segment1.rotation + angle;
43+
44+
segment1.draw(context)
45+
segment2.draw(context)
46+
}())
47+
};
48+
</script>
49+
</body>
50+
</html>

‎custom/examples/ch13/classes/slider.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import {captureMouse, rectContainsPoint} from '../../include/utils.js'
2+
3+
export default class Slider {
4+
constructor(min, max, value) {
5+
this.min = (min === undefined) ? 0 : min;
6+
this.max = (max === undefined) ? 100 : max;
7+
this.value = (value === undefined) ? 100 : value;
8+
this.onchange = null;
9+
10+
this.x = 0;
11+
this.y = 0;
12+
this.width = 16;
13+
this.height = 100;
14+
15+
this.backColor = "#cccccc";
16+
this.backBorderColor = "#999999";
17+
this.backWidth = 4;
18+
this.backX = this.width / 2 - this.backWidth / 2;
19+
20+
this.handleColor = "#eeeeee";
21+
this.handleBorderColor = "#cccccc";
22+
this.handleHeight = 6;
23+
this.handleY = 0;
24+
25+
this.updatePosition();
26+
}
27+
draw(context) {
28+
context.save();
29+
context.translate(this.x, this.y);
30+
31+
//draw back
32+
context.fillStyle = this.backColor;
33+
context.beginPath();
34+
context.fillRect(this.backX, 0, this.backWidth, this.height);
35+
context.closePath();
36+
37+
//draw handle
38+
context.strokeStyle = this.handleBorderColor;
39+
context.fillStyle = this.handleColor;
40+
context.beginPath();
41+
context.rect(0, this.handleY, this.width, this.handleHeight);
42+
context.closePath();
43+
context.fill();
44+
context.stroke();
45+
46+
context.restore();
47+
}
48+
updateValue() {
49+
var old_value = this.value,
50+
handleRange = this.height - this.handleHeight,
51+
valueRange = this.max - this.min;
52+
53+
this.value = (handleRange - this.handleY) / handleRange * valueRange + this.min;
54+
if (typeof this.onchange === 'function' && this.value !== old_value) {
55+
this.onchange();
56+
}
57+
}
58+
updatePosition() {
59+
var handleRange = this.height - this.handleHeight,
60+
valueRange = this.max - this.min;
61+
62+
this.handleY = handleRange - ((this.value - this.min) / valueRange) * handleRange;
63+
}
64+
captureMouse(element) {
65+
var self = this,
66+
mouse = captureMouse(element),
67+
bounds = {};
68+
69+
setHandleBounds();
70+
71+
element.addEventListener('mousedown', function () {
72+
if (rectContainsPoint(bounds, mouse)) {
73+
element.addEventListener('mouseup', onMouseUp, false);
74+
element.addEventListener('mousemove', onMouseMove, false);
75+
}
76+
}, false);
77+
78+
function onMouseUp() {
79+
element.removeEventListener('mousemove', onMouseMove, false);
80+
element.removeEventListener('mouseup', onMouseUp, false);
81+
setHandleBounds();
82+
}
83+
84+
function onMouseMove() {
85+
var pos_y = mouse.y - self.y;
86+
self.handleY = Math.min(self.height - self.handleHeight, Math.max(pos_y, 0));
87+
self.updateValue();
88+
}
89+
90+
function setHandleBounds() {
91+
bounds.x = self.x;
92+
bounds.y = self.y + self.handleY;
93+
bounds.width = self.width;
94+
bounds.height = self.handleHeight;
95+
}
96+
}
97+
}

0 commit comments

Comments
 (0)