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/

Answer 2

检查这个这是我的旧代码，可能会以某种方式帮助你。

More than 4 connecting points in graffle

如何在raphael中创建连接到盒子边缘的连接器

2 个答案: