Question

有人可以指导我如何将textpath属性应用于Joint JS中的链接标签文本吗？我创建了遵循特定路径的平滑链接，我希望我的标签文本沿着该路径出现。

代码段：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
    <div id="myholder"></div>
    <script type="text/javascript">

        var graph = new joint.dia.Graph;
        var paper = new joint.dia.Paper({
            el : $('#myholder'),
            width : 600,
            height : 200,
            model : graph,
            gridSize : 1
        });

        var rect = new joint.shapes.basic.Rect({
            position : {
                x : 100,
                y : 30
            },
            size : {
                width : 100,
                height : 30
            },
            attrs : {
                rect : {
                    fill : 'blue'
                },
                text : {
                    text : 'my box',
                    fill : 'white'
                }
            }
        });

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

        var link = new joint.dia.Link({
            source : {
                id : rect.id
            },
            target : {
                id : rect2.id
            },
            attrs : {
                '.connection' : {
                    'stroke' : 'lightgray',
                    'stroke-width' : 3,
                    'stroke-dasharray' : '5 2'
                },
                '.marker-source' : {
                    d : 'M 10 0 L 0 5 L 10 10 z',
                    fill : 'white'
                }
            },
            smooth : true,
            labels : [ {
                position : .5,
                attrs : {
                    text : {
                        text : 'LinkLabel',
                        fill : 'lightgray'
                    }
                }
            } ]
        });

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

Answer 1

I am not sure if there is a textpath attribute for a link exposed for jointjs. However the demo does use the label attribute with positions

labels: [
        { position: 25, attrs: { text: { text: '1..n' } }},
        { position: 0.45, attrs: { text: { text: 'multiple', fill: 'white', 'font-family': 'sans-serif' }, rect: { stroke: '#31d0c6', 'stroke-width': 20, rx: 5, ry: 5 } }},
        { position: 0.55, attrs: { text: { text: 'labels', fill: 'white', 'font-family': 'sans-serif' }, rect: { stroke: '#31d0c6', 'stroke-width': 20, rx: 5, ry: 5 } }},
        { position: -25, attrs: { text: { text: '*' } }}
    ]

this is for the last link in the demo http://resources.jointjs.com/demos/links

将textpath属性应用于Joint JS

1 个答案: