4.1 SVG

当我们知道如何设计元素时，我们来看看如何设置链接。再次，我们需要知道链接的SVG结构，然后使用外部CSS，链接的SVG结构如下：

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />

<g class="joint-theme-default joint-cell joint-type-link joint-link" id="j_1" model-id="3856002c-38e2-4f15-b8e5-e2649d580ad2" data-type="link">
    <path xmlns="http://www.w3.org/2000/svg" class="connection" id="v-9" stroke="blue" d="M 20 20 L 240 20" />
    <path xmlns="http://www.w3.org/2000/svg" class="marker-source" id="v-10" fill="red" stroke="black" transform="translate(10 15) scale(1) rotate(0)" d="M 10 0 L 0 5 L 10 10 Z" />  
    <path xmlns="http://www.w3.org/2000/svg" class="marker-target" id="v-11" fill="yellow" stroke="black" transform="translate(250 25) scale(1) rotate(-180)" d="M 10 0 L 0 5 L 10 10 Z" />
    <path xmlns="http://www.w3.org/2000/svg" class="connection-wrap" d="M 20 20 L 240 20" />
    <g xmlns="http://www.w3.org/2000/svg" class="labels" />
    <g xmlns="http://www.w3.org/2000/svg" class="marker-vertices" />
    <g xmlns="http://www.w3.org/2000/svg" class="marker-arrowheads"><g class="marker-arrowhead-group marker-arrowhead-group-source" id="v-7" transform="translate(10 7) scale(1) rotate(0)"><path class="marker-arrowhead" d="M 26 0 L 0 13 L 26 26 Z" end="source" /></g><g class="marker-arrowhead-group marker-arrowhead-group-target" id="v-8" transform="translate(250 33) scale(1) rotate(-180)"><path class="marker-arrowhead" d="M 26 0 L 0 13 L 26 26 Z" end="target" /></g></g>
    <g xmlns="http://www.w3.org/2000/svg" class="link-tools"><g class="link-tool" id="v-6" transform="translate(60 20)"><g class="tool-remove" event="remove"><circle r="11" /><path transform="scale(0.8) translate(-16 -16)" d="M 24.778 21.419 L 19.276 15.917 L 24.777 10.415 L 21.949 7.585 L 16.447 13.087 L 10.945 7.585 L 8.117 10.415 L 13.618 15.917 L 8.116 21.419 L 10.946 24.248 L 16.447 18.746 L 21.948 24.248 Z" /><title>Remove link.</title></g><g class="tool-options" event="link:options"><circle transform="translate(25)" r="11" /><path fill="white" transform="scale(0.55) translate(29 -16)" d="M 31.229 17.736 c 0.064 -0.571 0.104 -1.148 0.104 -1.736 s -0.04 -1.166 -0.104 -1.737 l -4.377 -1.557 c -0.218 -0.716 -0.504 -1.401 -0.851 -2.05 l 1.993 -4.192 c -0.725 -0.91 -1.549 -1.734 -2.458 -2.459 l -4.193 1.994 c -0.647 -0.347 -1.334 -0.632 -2.049 -0.849 l -1.558 -4.378 C 17.165 0.708 16.588 0.667 16 0.667 s -1.166 0.041 -1.737 0.105 L 12.707 5.15 c -0.716 0.217 -1.401 0.502 -2.05 0.849 L 6.464 4.005 C 5.554 4.73 4.73 5.554 4.005 6.464 l 1.994 4.192 c -0.347 0.648 -0.632 1.334 -0.849 2.05 l -4.378 1.557 C 0.708 14.834 0.667 15.412 0.667 16 s 0.041 1.165 0.105 1.736 l 4.378 1.558 c 0.217 0.715 0.502 1.401 0.849 2.049 l -1.994 4.193 c 0.725 0.909 1.549 1.733 2.459 2.458 l 4.192 -1.993 c 0.648 0.347 1.334 0.633 2.05 0.851 l 1.557 4.377 c 0.571 0.064 1.148 0.104 1.737 0.104 c 0.588 0 1.165 -0.04 1.736 -0.104 l 1.558 -4.377 c 0.715 -0.218 1.399 -0.504 2.049 -0.851 l 4.193 1.993 c 0.909 -0.725 1.733 -1.549 2.458 -2.458 l -1.993 -4.193 c 0.347 -0.647 0.633 -1.334 0.851 -2.049 L 31.229 17.736 Z M 16 20.871 c -2.69 0 -4.872 -2.182 -4.872 -4.871 c 0 -2.69 2.182 -4.872 4.872 -4.872 c 2.689 0 4.871 2.182 4.871 4.872 C 20.871 18.689 18.689 20.871 16 20.871 Z" /><title>Link options.</title></g></g></g>
</g>

4.2 attr

方法如下，参考见 dia.link

4.2.1 效果图

4.2.2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyJointJS05</title>
    <link rel="stylesheet" href="css/joint.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/lodash.js"></script><!--注意加载顺序-->
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/joint.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">

    var graph=new joint.dia.Graph;  //创建模型

    var  paper=new joint.dia.Paper({
        el: $('#myDiv'),      //纸放在哪
        width: 1000,            //纸多大
        height: 500,
        model: graph,       //纸里有什么
        gridSize: 1
    });  //注意Paper,js对大小写敏感

    var rect=new joint.shapes.basic.Rect({  //绘制元素
        position:{x: 100 , y: 70},
        size: {width: 100 ,height: 30},
        attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} }
    });

    var rect1=rect.clone();
    rect1.translate(300);

    var link=new joint.dia.Link({
        source: { id:rect.id },
        target: { id:rect1.id }
    });
    var link1=link.clone();
    var link2=link.clone();

    link.set('smooth', true)
    link.attr({
        '.connection': { stroke: 'blue' },
        '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
        '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
    });

    link1.attr({
        '.connection': { stroke: '#e74c3c' ,'stroke-width':5, d:'M 20 60 L 206 62 L 240 60' },
        '.marker-source': { fill: '#e74c3c', d: 'M 10 0 L 0 5 L 10 10 z' },
        '.marker-target': { fill: '#e74c3c', d: 'M 10 0 L 0 5 L 10 10 z' }
    });

    link2.attr({
        '.connection': { stroke: '#3498db' ,'stroke-dasharray':(5,2),'stroke-width':3, d:'M 30 100 L 245 96 L 226 81' },
        '.marker-source': { fill: '#3498db', d: 'M 5.5 15.499 L 15.8 21.447 L 15.8 15.846 L 25.5 21.447 L 25.5 9.552 L 15.8 15.152 L 15.8 9.552 Z' },
        '.marker-target': { fill: '#3498db', d: 'M 4.834 4.834 L 4.833 4.833 c -5.889 5.892 -5.89 15.443 0.001 21.334 s 15.44 5.888 21.33 -0.002 c 5.891 -5.891 5.893 -15.44 0.002 -21.33 C 20.275 -1.056 10.725 -1.056 4.834 4.834 Z M 25.459 5.542 c 0.833 0.836 1.523 1.757 2.104 2.726 l -4.08 4.08 c -0.418 -1.062 -1.053 -2.06 -1.912 -2.918 c -0.859 -0.859 -1.857 -1.494 -2.92 -1.913 l 4.08 -4.08 C 23.7 4.018 24.622 4.709 25.459 5.542 Z M 10.139 20.862 c -2.958 -2.968 -2.959 -7.758 -0.001 -10.725 c 2.966 -2.957 7.756 -2.957 10.725 0 c 2.954 2.965 2.955 7.757 -0.001 10.724 C 17.896 23.819 13.104 23.817 10.139 20.862 Z M 5.542 25.459 c -0.833 -0.837 -1.524 -1.759 -2.105 -2.728 l 4.081 -4.081 c 0.418 1.063 1.055 2.06 1.914 2.919 c 0.858 0.859 1.855 1.494 2.917 1.913 l -4.081 4.081 C 7.299 26.982 6.379 26.292 5.542 25.459 Z M 8.268 3.435 l 4.082 4.082 C 11.288 7.935 10.29 8.571 9.43 9.43 c -0.858 0.859 -1.494 1.855 -1.912 2.918 L 3.436 8.267 c 0.58 -0.969 1.271 -1.89 2.105 -2.727 C 6.377 4.707 7.299 4.016 8.268 3.435 Z M 22.732 27.563 l -4.082 -4.082 c 1.062 -0.418 2.061 -1.053 2.919 -1.912 c 0.859 -0.859 1.495 -1.857 1.913 -2.92 l 4.082 4.082 c -0.58 0.969 -1.271 1.891 -2.105 2.728 C 24.623 26.292 23.701 26.983 22.732 27.563 Z'}
    });

    graph.addCells([rect,rect1,link,link1,link2]);
    
</script>
</body>
</html>

ps:参考网址

http://resources.jointjs.com/tutorial/link-styling

JointJS零基础入门04-链接样式

4.2 attr

4.2.1 效果图

4.2.2 代码

猜你喜欢