forked from DmitryBaranovskiy/raphaeljs.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
curver.html
90 lines (90 loc) · 4.46 KB
/
curver.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Raphaël · Curver</title>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder", 620, 420),
discattr = {fill: "#fff", stroke: "none"};
r.rect(0, 0, 619, 419, 10).attr({stroke: "#666"});
r.text(310, 20, "Drag the points to change the curves").attr({fill: "#fff", "font-size": 16});
function curve(x, y, ax, ay, bx, by, zx, zy, color) {
var path = [["M", x, y], ["C", ax, ay, bx, by, zx, zy]],
path2 = [["M", x, y], ["L", ax, ay], ["M", bx, by], ["L", zx, zy]],
curve = r.path(path).attr({stroke: color || Raphael.getColor(), "stroke-width": 4, "stroke-linecap": "round"}),
controls = r.set(
r.path(path2).attr({stroke: "#ccc", "stroke-dasharray": ". "}),
r.circle(x, y, 5).attr(discattr),
r.circle(ax, ay, 5).attr(discattr),
r.circle(bx, by, 5).attr(discattr),
r.circle(zx, zy, 5).attr(discattr)
);
controls[1].update = function (x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({cx: X, cy: Y});
path[0][1] = X;
path[0][2] = Y;
path2[0][1] = X;
path2[0][2] = Y;
controls[2].update(x, y);
};
controls[2].update = function (x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({cx: X, cy: Y});
path[1][1] = X;
path[1][2] = Y;
path2[1][1] = X;
path2[1][2] = Y;
curve.attr({path: path});
controls[0].attr({path: path2});
};
controls[3].update = function (x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({cx: X, cy: Y});
path[1][3] = X;
path[1][4] = Y;
path2[2][1] = X;
path2[2][2] = Y;
curve.attr({path: path});
controls[0].attr({path: path2});
};
controls[4].update = function (x, y) {
var X = this.attr("cx") + x,
Y = this.attr("cy") + y;
this.attr({cx: X, cy: Y});
path[1][5] = X;
path[1][6] = Y;
path2[3][1] = X;
path2[3][2] = Y;
controls[3].update(x, y);
};
controls.drag(move, up);
}
function move(dx, dy) {
this.update(dx - (this.dx || 0), dy - (this.dy || 0));
this.dx = dx;
this.dy = dy;
}
function up() {
this.dx = this.dy = 0;
}
curve(70, 100, 110, 100, 130, 200, 170, 200, "hsb(0, .75, .75)");
curve(170, 100, 210, 100, 230, 200, 270, 200, "hsb(.8, .75, .75)");
curve(270, 100, 310, 100, 330, 200, 370, 200, "hsb(.3, .75, .75)");
curve(370, 100, 410, 100, 430, 200, 470, 200, "hsb(.6, .75, .75)");
curve(470, 100, 510, 100, 530, 200, 570, 200, "hsb(.1, .75, .75)");
};
</script>
</head>
<body>
<div id="holder"></div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
</body>
</html>