javascript - 如何在拉斐尔中创建到盒子边缘的连接器

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'});;       

我似乎在 Raphael doco 中找不到任何内容来说明如何做到这一点。 我这里有一个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/