Skip to content

Commit ef5807a

Browse files
author
yoyomyo
committed
changed bezier
1 parent da1d65d commit ef5807a

File tree

5 files changed

+114
-102
lines changed

5 files changed

+114
-102
lines changed

‎Bezier/bezier.css

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
body{
2-
font-family: "Helvetica Neue", Helvetica, sans-serif;
3-
}
4-
51
h1 {
2+
font-family: "Helvetica Neue", Helvetica, sans-serif;
63
font-size: 64px;
74
font-weight: 300;
85
letter-spacing: -2px;
@@ -51,4 +48,12 @@ h1 {
5148
font-size: 16px;
5249
font-weight: 300;
5350
vertical-align:top;
51+
}
52+
53+
54+
#instruction{
55+
font-family: "Helvetica Neue", Helvetica, sans-serif;
56+
margin: 0 20px 40px 0;
57+
color: #000;
58+
font-size: 16px;
5459
}

‎Bezier/curves.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Curve.prototype.connectTheDots = function(ctx){
3636
ctx.lineWidth=3;
3737

3838
if(this.curveType === Curve.types.BEZIER || this.curveType === Curve.types.B_SPLINE){
39-
ctx.strokeStyle='#eee';
39+
ctx.strokeStyle="rgba(100,100,100,0.1)";
4040
}else{
4141
ctx.strokeStyle='#000';
4242
}

‎Bezier/point.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
//point class
22

3-
POINT_RADIUS = 8;
4-
TOLERANCE = 5;
3+
var POINT_RADIUS = 5;
4+
var TOLERANCE = 6;
55

66
function Point(x,y){
77
this.x = x;

‎Bezier/script.js

Lines changed: 91 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,104 @@
1-
var canvas=document.getElementById("canvas");
2-
canvas.width = 640;
3-
canvas.height = 480;
4-
var ctx=canvas.getContext("2d");
5-
var rect = canvas.getBoundingClientRect();
6-
canvas.addEventListener('click', onMouseClick);
7-
canvas.addEventListener('mousedown', onMouseDown);
8-
canvas.addEventListener('mouseup', onMouseUp);
9-
canvas.addEventListener('mousemove', onMouseMove);
1+
(function(){
2+
var canvas=document.getElementById("canvas");
3+
canvas.width = 640;
4+
canvas.height = 480;
5+
var ctx=canvas.getContext("2d");
6+
var rect = canvas.getBoundingClientRect();
7+
canvas.addEventListener('click', onMouseClick);
8+
canvas.addEventListener('mousedown', onMouseDown);
9+
canvas.addEventListener('mouseup', onMouseUp);
10+
canvas.addEventListener('mousemove', onMouseMove);
1011

11-
var selected = null;
12-
var dragged = false;
13-
var levelOfDetail = 20;
12+
//initial value
13+
var selected = null;
14+
var dragged = false;
15+
var levelOfDetail = 20;
16+
var curve = new Bezier();
1417

15-
16-
var curve = new Curve();
17-
18-
function getMousePos(e){
19-
var x = e.pageX - canvas.offsetLeft;
20-
var y = e.pageY - canvas.offsetTop;
21-
return new Point(x,y);
22-
}
23-
function onMouseClick(e){
24-
25-
var p = getMousePos(e);
26-
var addPoint = true;
27-
for(var i in curve.cPoints){
28-
if(curve.cPoints[i].equal(p)){
29-
curve.cPoints[i].active = true;
30-
addPoint = false;
31-
}else{
32-
curve.cPoints[i].active = false;
33-
}
34-
}
35-
if(addPoint){
36-
p.active = true;
37-
curve.cPoints.push(p)
38-
};
39-
redraw();
40-
41-
}
42-
43-
function onMouseDown(e){
44-
dragged = true;
45-
var pos = getMousePos(e);
46-
selected = curve.updateActivePoint(pos);
47-
}
48-
49-
function onMouseMove(e){
50-
if (!dragged) {
51-
return;
18+
function getMousePos(e){
19+
var x = e.pageX - canvas.offsetLeft;
20+
var y = e.pageY - canvas.offsetTop;
21+
return new Point(x,y);
5222
}
53-
p = getMousePos(e);
54-
if(selected){
55-
selected.x = p.x;
56-
selected.y = p.y;
23+
function onMouseClick(e){
24+
var p = getMousePos(e);
25+
var addPoint = true;
26+
for(var i in curve.cPoints){
27+
if(curve.cPoints[i].equal(p)){
28+
curve.cPoints[i].active = true;
29+
addPoint = false;
30+
}else{
31+
curve.cPoints[i].active = false;
32+
}
33+
}
34+
if(addPoint){
35+
p.active = true;
36+
curve.cPoints.push(p)
37+
};
38+
redraw();
5739
}
58-
redraw();
59-
}
6040

61-
function onMouseUp(e){
62-
dragged = false;
63-
}
41+
function onMouseDown(e){
42+
dragged = true;
43+
var pos = getMousePos(e);
44+
selected = curve.updateActivePoint(pos);
45+
}
6446

65-
function redraw(){
66-
ctx.clear("#FFF");
67-
curve.draw(ctx,levelOfDetail);
68-
}
47+
function onMouseMove(e){
48+
if (!dragged) {
49+
return;
50+
}
51+
p = getMousePos(e);
52+
if(selected){
53+
selected.x = p.x;
54+
selected.y = p.y;
55+
}
56+
redraw();
57+
}
6958

70-
ctx.clear = function(fillColor) {
71-
ctx.fillStyle = fillColor;
72-
ctx.fillRect(0,0,rect.width, rect.height);
73-
};
59+
function onMouseUp(e){
60+
dragged = false;
61+
}
7462

75-
$('#curveType').change(function(){
76-
var type = +$('#curveType').find('input:checked').val();
77-
var cPoints = curve? curve.cPoints: [];
78-
if(type === Curve.types.STRAIGHT_LINE){
79-
curve = new Curve();
80-
curve.cPoints = cPoints;
81-
}else if(type === Curve.types.BEZIER){
82-
curve = new Bezier();
83-
curve.cPoints = cPoints;
84-
}else if(type === Curve.types.B_SPLINE){
85-
curve = new BSpline();
86-
curve.cPoints = cPoints;
63+
function redraw(){
64+
ctx.clear("#FFF");
65+
curve.draw(ctx,levelOfDetail);
8766
}
88-
redraw();
89-
})
9067

91-
$('#levelOfDetail').html(levelOfDetail);
92-
$( "#slider" ).slider({
93-
range: "min",
94-
max: 100,
95-
value: levelOfDetail,
96-
slide: updateLevelOfDetail,
97-
change: updateLevelOfDetail
98-
});
68+
ctx.clear = function(fillColor) {
69+
ctx.fillStyle = fillColor;
70+
ctx.fillRect(0,0,rect.width, rect.height);
71+
};
9972

73+
$('#curveType').change(function(){
74+
var type = +$('#curveType').find('input:checked').val();
75+
var cPoints = curve? curve.cPoints: [];
76+
if(type === Curve.types.STRAIGHT_LINE){
77+
curve = new Curve();
78+
curve.cPoints = cPoints;
79+
}else if(type === Curve.types.BEZIER){
80+
curve = new Bezier();
81+
curve.cPoints = cPoints;
82+
}else if(type === Curve.types.B_SPLINE){
83+
curve = new BSpline();
84+
curve.cPoints = cPoints;
85+
}
86+
redraw();
87+
})
10088

101-
function updateLevelOfDetail() {
102-
levelOfDetail = $( "#slider" ).slider( "value" );
10389
$('#levelOfDetail').html(levelOfDetail);
104-
redraw();
105-
}
90+
$( "#slider" ).slider({
91+
range: "min",
92+
max: 100,
93+
value: levelOfDetail,
94+
slide: updateLevelOfDetail,
95+
change: updateLevelOfDetail
96+
});
97+
98+
99+
function updateLevelOfDetail() {
100+
levelOfDetail = $( "#slider" ).slider( "value" );
101+
$('#levelOfDetail').html(levelOfDetail);
102+
redraw();
103+
}
104+
})();

‎bezier.html

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,25 @@
1818
<div class="span3">
1919
<div class="sidebar-nav">
2020
<ul class="nav nav-list">
21+
<div id="instruction">
22+
<p>
23+
<strong>Left click</strong> on the canvas to add a control point.
24+
<!-- <strong>Right click</strong> on the canvas to remove a control point.
25+
--> <strong>Drag</strong> a control point to change curve shape.
26+
</P>
27+
</div>
28+
2129
<li class="nav-header">Select Curve Type</li>
2230
<div id="curveType">
2331
<div class="radio">
2432
<label>
25-
<input type="radio" name="optionsRadios" id="type0" value="0" checked>
33+
<input type="radio" name="optionsRadios" id="type0" value="0">
2634
Straight line
2735
</label>
2836
</div>
2937
<div class="radio">
3038
<label>
31-
<input type="radio" name="optionsRadios" id="type1" value="1">
39+
<input type="radio" name="optionsRadios" id="type1" value="1" checked>
3240
Bezier
3341
</label>
3442
</div>
@@ -39,7 +47,7 @@
3947
</label>
4048
</div>
4149
</div>
42-
<li class="nav-header">Select level of detail</li>
50+
<li class="nav-header">Select curve smoothness</li>
4351
<div id="sliderWrapper">
4452
<span id="levelOfDetail"></span>
4553
<div id="slider">

0 commit comments

Comments
 (0)