我知道已经有一些关于 SO 的示例，但我想了解实际的内部结构是如何工作的。我知道如何使用 M 和 L 属性创建一条线，但我想了解如何使用 javascript 连接形状。
我浏览了一些示例，但我无法理解它是如何实现的。任何示例或链接将不胜感激
这是我的代码:
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
<script type="text/javascript">
window.onload = function ()
{
var paper = new Raphael(Raphael("container", "100%", "100%"));
var sidebar = paper.rect(0, 43.5, 69, 620);
var rect = paper.rect(10, 50, 51, 41, 5).attr({stroke: '#6DAACA', 'stroke-width': 1, fill: '#D6F2FC'});
var circle1 = paper.circle(35, 145, 25).attr({fill: '#fff', 'stroke-width': 2, stroke: '#399324'});
var circle2 = paper.circle(35, 225, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#9E2F3C'});
var circle3 = paper.circle(35, 310, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#D5C096'});
var Customrect = paper.path("M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411");
// circle clonning
paper.set(circle1);
var clone_handler = function () {
var x = this.clone();
x.drag(move, start, up);
};
var start = function (x, y, event) {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
},
move = function (dx, dy) {
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
},
up = function () {
this.animate({
r: 20,
opacity: .8
}, 500, ">");
};
circle1.mousemove(clone_handler);
circle2.mousemove(clone_handler);
circle3.mousemove(clone_handler);
};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<h1 id="title">Editor</h1>
<div id="footer"></div>
</div>
</div>
</body>
</html>
最佳答案
您可以使用 line() 方法或作为 path() 来绘制一条线。您似乎想知道路径方法，所以就这样做。
您需要考虑将线绘制到哪里，我将通过选择对象的中心来完成，因此它应该适用于任何形状。
我们将设置一个处理程序，因此在 dblclick() 上选择一个对象
x.dblclick( addLine )
然后是一个函数来实际添加路径。
首先我们通过 Raphael 获取两个边界框，它提供了元素的中心(注意，原生 getBBox 方法仅提供 x,y,width,height，但 Raph 提供了一些额外的位)。
然后我们创建新路径，
M = 移至 L = 线路至
因此，我们将 M 移动到我们想要开始绘制的点(元素 1 的中心)，然后将 Line To L 移动到另一个元素的中心。
将元素拖出，然后双击 2 个元素在它们之间画一条线
function addLine() {
if( lastEl ) {
bb1 = this.getBBox();
bb2 = lastEl.getBBox();
var newPath = paper.path('M'+bb1.cx+','+bb1.cy+'L'+bb2.cx+','+bb2.cy);
newPath.attr({ stroke: 'blue'})
}
lastEl = this;
}
jsbin :双击2个元素
您也可以只使用一条线而不是一条路径，原理相同。
您可以通过 insertBefore 元素隐藏线条的中心，使其显示在“顶部”
如果您将该元素拖动到该行之后，它不会移动，您需要将其编码为拖动处理程序的一部分以更新路径或行(这是某些库为您所做的)。
关于javascript - 如何在raphaeljs中使用一条线连接两个svg元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31229162/