如何在拉斐尔中创建长方体边缘的连接器

Question

我想让连接器只放在盒子的边缘，而不是像现在那样放在中心。我可以通过将连接器放在盒子后面来以图形方式伪造它，但我希望箭头末端在盒子的边缘是可见的。

    connection.view = paper.path(
        'M'+connection.from.x+','+connection.from.y+' '+
        'L'+connection.to.x+','+connection.to.y
    ).attr({
            'stroke-width':5,
            'stroke': 'blue',
            'arrow-end': 'block-midium-midium',
            'arrow-start': 'oval-narrow-short'});;       

我似乎在拉斐尔的文档中找不到任何东西来说明如何做到这一点。我这里有一个jsfiddle：http://jsfiddle.net/21cp7q3d/

Answer 1

connection.view = paper.path(
        'M'+(connection.from.x + w / 2)+','+connection.from.y+' '+
        'L'+connection.to.x+','+connection.to.y
    )

只需将de x或y修改为框大小的一半。

或者，您可以在框中添加想要开始的位置。

{x:100,y:100,start:150,title:'LTM',color:'lightgray'}

connection.view = paper.path(
        'M'+connection.from.start+','+connection.from.y+' '+
        'L'+connection.to.x+','+connection.to.y
    )

http://jsfiddle.net/21cp7q3d/1/

然后做相反的事情

connection.view = paper.path(
        'M'+connection.from.x+','+connection.from.y+' '+
        'L'+(connection.to.x - w / 2)+','+connection.to.y
    )

http://jsfiddle.net/21cp7q3d/2/

Answer 2

看看这个，这是我的旧代码，也许它会以某种方式帮助你。

More than 4 connecting points in graffle