Я хочу нарисовать некоторые кривые в 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 = basic, то скрыть маркеры кривых, а если mode = advanced, то показать маркеры.
, но у меня есть 2 проблемы:
1 - когда я нажимаю на кнопки, это создает новую кривую с ручками или без них, я хочу применить скрытие или показать условие к первой кривой и несоздавать или дублировать любые другие кривые.
2 - как я могу вернуть все позиции маркеров, когда они изменились, и сохранить их в HTML-элементах (показать в теге
)