1

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.
});
4

1 に答える 1

7

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「特殊属性」グループの一部です。すべての属性のリストは、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 };
            }
        }
    }
});
于 2016-07-22T11:28:10.193 に答える