我想在HTML文件中绘制一些带有控制手柄的曲线。所以我使用Raphael js库，并在此页面中像样本一样编写了我的代码：https://dmitrybaranovskiy.github.io/raphael/curver.html
我的代码在这里：
<head>
<style>
#holder { position: absolute; width: 620px; height: 420px; left:100px;}
</style>
<script src="raphael.js" type="text/javascript"></script>
<script>
function draw_curve(mode) {
var r = Raphael("holder", 620, 420), discattr = {fill: "#ccc", stroke: "none"};
function curve(x, y, ax, ay, bx, by, zx, zy, color) {
if (mode=="basic"){
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": 2, "stroke-linecap": "round"}),
controls = r.set(
r.path(path2).attr({stroke: "none"}),
r.circle(x, y, 0).attr(discattr),
r.circle(ax, ay, 0).attr(discattr),
r.circle(bx, by, 0).attr(discattr),
r.circle(zx, zy, 0).attr(discattr)
);
}else{
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": 2, "stroke-linecap": "round"}),
controls = r.set(
r.path(path2).attr({stroke: "#ccc", "stroke-dasharray": "- "}),
r.circle(x, y, 0).attr(discattr),
r.circle(ax, ay, 4).attr(discattr),
r.circle(bx, by, 4).attr(discattr),
r.circle(zx, zy, 0).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});
document.getElementById("L1_curv1").innerHTML = path[1][1] + " , " + path[1][2];
};
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(0, 200, 100, 200, 180, 180, 200, 100, "red");
curve(200, 100, 220, 180, 250, 200, 300, 200, "red");
};
</script>
</head>
<body onload="draw_curve('basic')">
<div id="holder"></div>
<button onclick="draw_curve('basic')">basic</button><br>
<button onclick="draw_curve('advanced')">advanced</button>
</body>
在该代码中使用条件检查mode，如果mode = basic则隐藏曲线手柄，而mode = advanced则显示handle。
但是我有2个问题：
1-当我单击按钮时，它创建了一条带有或不带有手柄的新曲线，我想对第一条曲线应用隐藏或显示条件，而不创建或复制任何其他曲线。
2-当它们更改后，如何返回所有手柄位置并将其存储到html元素中（在
标记中显示）