-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbezier.html
149 lines (125 loc) · 5.22 KB
/
bezier.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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Кривые Безье</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="showTemp">Show temporary lines</label><input id="showTemp" type="checkbox" />
<div onClick = "logBall()" style="background: #f00; width: 200px; height: 50px; float: left" ></div>
<div style="float: left; height: 50px;">
<input type="file" id="files" name="files[]" multiple />
</div>
<div style="clear: both">
<canvas id="canvas" width="500" height="500">
<p>Увас не поддеривается Канвас, поставьте гугл хром =)</p>
</canvas>
</div>
<ul>
<li><a href="bezier.html">Bezier Curve</a></li>
<li><a href="test.html">Polygon rotate</a></li>
<li><a href="cube.html">Cube</a></li>
</ul>
<script src="util.js"></script>
<script src="shapes.js"></script>
<script type="text/javascript">
var logInfo = false;
function logBall(){
logInfo = true;
}
window.onload = function(){
/*
TODO
Скрипт для чтения данных из файла (и вывода на консоль,
в дальнейшем можно из этого получить точки для кривых)
*/
function readlob() {
var files = document.getElementById('files').files;
var file = files[0];
var reader = new FileReader();
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
console.log(evt.target.result);
}
};
reader.readAsBinaryString(file);
}
document.getElementById('files').addEventListener('change', readlob, false);
//получаем холст "канвас"
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
balls = new Array;
//событие при двойном клике мышью (создание точки)
canvas.addEventListener('dblclick', function(){
var tmp_ball = new Ball(5, get_random_color(), mouse.x, mouse.y);
balls.push(tmp_ball);
}, false);
//событие при нажатии на левую кнопку мыши
//если под курсор попадает точка, то захватываем её (dragged = true)
canvas.addEventListener('mousedown', function(event){
event.preventDefault();
for(var i=balls.length-1; i>=0; i--){
if(utils.containsPoint(balls[i].getBounds() , mouse.x, mouse.y)){
balls[i].dragged = true;
//раскомментируйте чтобы точки не сцеплялись..
//сцепление не реализовано
return true;
}
}
}, false);
//когда отпускаем кнопку мыши отпускаем захваты все (dragged = false)
canvas.addEventListener('mouseup', function(){
if(balls.some(function(ball){return ball.dragged})){
balls.forEach(function(ball, i){
ball.dragged = false;
});
}
}, false);
//перемещение курсора мыши
//все захваченные точки будут перемещаться
canvas.addEventListener('mousemove', function () {
balls.forEach(function(ball, i){
if (ball.dragged) {
ball.x = mouse.x;
ball.y = mouse.y;
}
});
}, false);
/* Изменяем эту переменную на 3 или 4 в зависимости от того
какую кривую хотим получить
*/
var typeOfCurve = 4;
/*Функция объявленная в круглых скобках сразу начинат выполняться
см документацию JavaScript
*/
var showTemp;
document.getElementById('showTemp').addEventListener("click", function(e) {
showTemp = this.checked;
console.log(showTemp);
}, false);
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
//рисуем кривую в зависимости от типа 3 или 4
for(var i=0; i<balls.length-(balls.length % typeOfCurve); i+=typeOfCurve){
var a = (typeOfCurve == 3) ? new CurveBezier(balls[i], balls[i+1], balls[i+2], 30, "#f00")
: new CubicBezier(balls[i], balls[i+1], balls[i+2], balls[i+3], 30, "#f00", showTemp);
a.draw(context);
}
//рисуем точки
balls.forEach(function(ball){
ball.draw(context);
});
//вывод координат в консоль
if(logInfo){
console.log(JSON.stringify(balls));
logInfo = false;
alert("Look at the Console");
}
}());
}
</script>
</body>
</html>