Jointjs 将文本放在顶部而不是矩形的中心

Question

在 JointJS 中，如何将标签放置在顶部而不是居中。像这样的事情：

所以在编码中：

var r1 = new joint.shapes.basic.Rect({
    position: { x: 20, y: 20 },
    size: { width: 200, height: 200 },
    attrs: { rect: { fill: '#E74C3C' }, text: { text: 'Parent' } } // I want to position text on top.
});

Answer 1

您可以使用 ref-y 属性，例如

var r1 = new joint.shapes.basic.Rect({
    position: { x: 200, y: 20 },
    size: { width: 200, height: 200 },
    attrs: { rect: { fill: '#E74C3C' }, text: { text: 'Parent', 'ref-y': 20} } // I want to position text on top.
});

编辑:

refX 是 "special attributes" 组的一部分。可以在此处找到所有属性的列表：http://resources.jointjs.com/docs/jointjs/v2.0/joint.html#dia.attributes

也可以定义自定义属性：

任一全局特殊属性- 扩展 joint.dia.attributes 命名空间（attr lineStyle）：

joint.dia.attributes.lineStyle = {
    set: function(lineStyle, refBBox, node, attrs) {

        var n = attrs['strokeWidth'] || attrs['stroke-width'] || 1;
        var dasharray = {
            'dashed': (4*n) + ',' + (2*n),
            'dotted': n + ',' + n
        }[lineStyle] || 'none';

        return { 'stroke-dasharray': dasharray };
    }
};

或特定形状的特殊属性（属性d）：

var Circle = joint.dia.Element.define('custom.Circle', {
    markup: '<g class="rotatable"><ellipse/><text/><path/></g>',
    attrs: {
        ellipse: {
            fill: '#FFFFFF',
            stroke: '#cbd2d7',
            strokeWidth: 3,
            lineStyle: 'dashed',
            fitRef: true
        },
        path: {
            stroke: '#cbd2d7',
            strokeWidth: 3,
            lineStyle: 'dotted',
            fill: 'none',
            d: ['M', 0, '25%', '100%', '25%', 'M', '100%', '75%', 0, '75%']
        },
        text: {
            fill: '#cbd2d7',
            fontSize: 20,
            fontFamily: 'Arial, helvetica, sans-serif',
            refX: '50%',
            refY: '50%',
            transform: 'rotate(45) scale(0.5,0.5)',
            yAlignment: 'middle',
            xAlignment: 'middle'
        }
    }

}, {

}, {

    // Element specific special attributes
    attributes: {

        d: {
            // The path data `d` attribute to be defined via an array.
            // e.g. d: ['M', 0, '25%', '100%', '25%', 'M', '100%', '75%', 0, '75%']
            qualify: _.isArray,
            set: function(value, refBBox) {
                var i = 0;
                var attrValue = value.map(function(data, index) {
                    if (_.isString(data)) {
                        if (data.slice(-1) === '%') {
                            return parseFloat(data) / 100 * refBBox[((index - i) % 2) ? 'height' : 'width'];
                        } else {
                            i++;
                        }
                    }
                    return data;
                }).join(' ');
                return { d:  attrValue };
            }
        }
    }
});

Jointjs 将文本放在顶部而不是矩形的中心

Jointjs postion text on top instead of center for rectangle

jointjs

dia