JointJS:使链接标签在链接本身上移动

JointJS: make link label movable over the link itself

本文关键字：链接 移动 标签 JointJS      更新时间：2023-09-26

对于链接-在JointJS图中-我试图实现本教程(http://jointjs.com/tutorial/constraint-move-to-circle)来移动链接上的标签，但我不明白在哪里放置ConstraintElementView .

  1. 我想让链接的标签在链接上移动。那么我如何将链接定义为可移动标签的"路径"呢?

ConstraintElementView 

var constraint = label; // ???
var ConstraintElementView = joint.dia.ElementView.extend({
    pointerdown: function(evt, x, y) {
        var position = this.model.get('position');
        var size = this.model.get('size');
        var center = g.rect(position.x, position.y, size.width, size.height).center();
        var intersection = constraint.intersectionWithLineFromCenterToPoint(center);
        joint.dia.ElementView.prototype.pointerdown.apply(this, [evt, intersection.x, intersection.y]);
    },
    pointermove: function(evt, x, y) {
        var intersection = constraint.intersectionWithLineFromCenterToPoint(g.point(x, y));
        joint.dia.ElementView.prototype.pointermove.apply(this, [evt, intersection.x, intersection.y]);
    }
});

链接标签

paper.on({
    /**
    *   Doubleclick on link: Add label for link
    */
    'cell:pointerdblclick': function(cellView, event, x, y){            
        if (cellView.model.isLink()) {
            cellView.model.label(0, {
                position: .5,
                attrs: {
                    rect: { fill: '#eeeeee' },
                    text: { text: 'text', 'font-size': 12, ref: 'rect' }
                }
            });
        }
    }
});
论文

var paper = new joint.dia.Paper({
    el: $('#canvas'),
    width: 801,
    height: 496,
    model: graph,
    gridSize: 10,
    elementView: ConstraintElementView,
    defaultLink: new joint.dia.Link({
        router: { name: 'manhattan' },
        connector: { name: 'rounded' },
        attrs: {
            '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#6a6c8a', stroke: '#6a6c8a' },
            '.connection': { stroke: '#6a6c8a', 'stroke-width': 2 }
        }
    })
});
  • 由于它可以在链接上移动，它应该被固定在曼哈顿式链接的每个部分的中心。但是我没有看到任何机会获得每个片段的中心值。

    • 不需要创建任何路径。只需通过计算相对值来改变标签的位置——当然也可以使用绝对值。

    'cell:pointermove': function(event, x, y) {
    if (event.model.isLink()) {
            var clickPoint  = { x: event._dx, y: event._dy },
                lengthTotal = event.sourcePoint.manhattanDistance(event.targetPoint),
                length      = event.sourcePoint.manhattanDistance(clickPoint),
                position    = round(length / lengthTotal, 2);
            event.model.label(0, { position: position });
    }
}

    允许标签沿着链接移动，可以通过纸上interactive对象的labelMove选项来完成:

    var paper = new joint.dia.Paper({ // ... interactive: { labelMove: true } // ... })

    默认为false

    相关文章：