Question

我知道有一些关于SO已经完成的例子，但我想了解实际的内部工作原理。我知道如何使用M和L属性创建一行，但我想了解如何使用javascript连接形状。

我经历了一些例子，但我无法理解它是如何实现的。任何示例或链接将不胜感激

这是我的代码：

<filter>
  <artifact>*:*</artifact>
  <excludes>
    <exclude>META-INF/*.SF</exclude> 
    <exclude>META-INF/*.DSA</exclude> 
    <exclude>META-INF/*.RSA</exclude> 
    <exclude>META-INF/ECLIPSE*</exclude> 
  </excludes>
</filter>

这是现场演示：https://jsbin.com/qawupugivi/edit?html,css,output

Answer 1

您可以使用line（）方法或路径（）绘制一条线。您似乎想知道路径方法，所以会这样做。

你需要考虑绘制线的位置，我会选择一个对象的中心来做，所以它应该适用于任何形状。

我们将设置一个处理程序，因此在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元素隐藏线条的中心，使其显示在顶部＆＃39;

如果您在该行之后拖动该元素，它将不会移动，您将需要将其作为拖动处理程序的一部分进行编码以更新路径或行（这是某些库为您执行的操作）。

如何使用raphaeljs中的一行连接两个svg元素

1 个答案: