Question

我使用JointJS创建了一个自定义元素。现在我想动态更改元素文本。我使用下面的代码来做到这一点。当我在冷杉处检查时，我可以看到附加在DOM中。但实际文本在浏览器中不可见。我在initialize（）方法中动态追加文本。我尝试格式化属性。但没有奏效。请帮我.. output

joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
        markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="node-text"/><g class="inPorts"/><g class="outPorts"/></g>',
        portMarkup: '<g class="port<%= id %>"><circle/></g>',

        defaults: joint.util.deepSupplement({

            type: 'html.Element',
            size: { width: 200, height: 200 },

            inPorts: [],
            outPorts: [],
            attrs: {
                '.': { magnet: false },
                rect: {
                    stroke: 'none', 'fill-opacity': 0, width: 150, height: 250,
                },
                circle: {
                    r: 6, //circle radius
                    magnet: true,
                    stroke: 'none'
                },
                'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
                'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' },


                '.inPorts circle': { fill: '#B45F04', magnet: 'passive', type: 'input'},
                '.outPorts circle': { fill: '#B45F04', type: 'output'},

                // Ports styling.
                '.option .port-body': { stroke: 'none', r: 5, fill: '#31d0c6' },
                '.inPorts .port-body': { stroke: 'none', fill: 'none', r: 10 },
                '.outPorts .port-body': { stroke: 'none', fill: 'none', r: 10 },
            }
        }, joint.shapes.basic.Generic.prototype.defaults),

        initialize: function() {
// Appending the sample text here

var elemText = this.get（＆＃39; sample＆＃39;）;

            this.attr('.node-text/text', elemText);
            joint.shapes.basic.PortsModelInterface.initialize.apply(this, arguments);
        },
        getPortAttrs: function (portName, index, total, selector, type) {

            var attrs = {};
            var portClass = 'port' + index;
            var portSelector = selector + '>.' + portClass;
            var portCircleSelector = portSelector + '>circle';
            attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
            attrs[portSelector] = { ref: 'rect', 'ref-y': (index + 0.7) * (1 / total) };
            if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 13; }
            return attrs;
        }
    }));


   // Create a custom view for that element that displays an HTML div above it.
   // -------------------------------------------------------------------------

    joint.shapes.html.ElementView = joint.dia.ElementView.extend(_.extend({}, joint.shapes.basic.PortsViewInterface, {

        template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '</div>'
        ].join(''),

    initialize: function() {
        _.bindAll(this, 'updateBox');
        joint.dia.ElementView.prototype.initialize.apply(this, arguments);

        this.$box = $(_.template(this.template)());
        this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
        this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
        // Update the box position whenever the underlying model changes.
        this.model.on('change', this.updateBox, this);
        // Remove the box when the model gets removed from the graph.
        this.model.on('remove', this.removeBox, this);

    },


     render: function() {
        joint.dia.ElementView.prototype.render.apply(this, arguments);
        this.paper.$el.prepend(this.$box);
        // this.paper.$el.mousemove(this.onMouseMove.bind(this)), this.paper.$el.mouseup(this.onMouseUp.bind(this));
        this.updateBox();
        return this;
    },

    renderPorts: function () {
        var $inPorts = this.$('.inPorts').empty();
        var $outPorts = this.$('.outPorts').empty();

        var portTemplate = _.template(this.model.portMarkup);

        _.each(_.filter(this.model.ports, function (p) { return p.type === 'in' }), function (port, index) {

            $inPorts.append(V(portTemplate({ id: index, port: port })).node);
        });
        _.each(_.filter(this.model.ports, function (p) { return p.type === 'out' }), function (port, index) {

            $outPorts.append(V(portTemplate({ id: index, port: port })).node);
        });
    }, 

    update: function () {
        this.renderPorts();
        joint.dia.ElementView.prototype.update.apply(this, arguments);
    },

    updateBox: function() {
        var bbox = this.model.getBBox();


        this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
    },
    removeBox: function(evt) {
        this.$box.remove();
    }
})); 


    var arrowheadShape = 'M 10 0 L 0 5 L 10 10 z';
    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 1500,
        height: 700,
        model: graph,
           defaultLink: new joint.dia.Link({
                                            smooth: true,
                                            router: { name: 'manhattan' },
                                            connector: { name: 'smooth' },
                                            attrs: {
                                                '.connection' : {
                                                                stroke: '#333333',
                                                                'stroke-width': 1
                                                            },
                                                '.marker-target': {
                                                    d: arrowheadShape
                                                }
                                            }
                                        }),
    });


// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------

var el1 = new joint.shapes.html.Element({ 
    position: { x: 600, y: 250 }, 
    size: { width: 130, height: 30 },
    inPorts: ['in'],
    outPorts: ['out'],
    sample: 'Sample'
  });

graph.addCells([el1]);

Answer 1

请尝试以下方法。我将attrs中的文本字段替换为＆＃39; .node-text＆＃39;所以现在它有一个可以在视图上的位置。

attrs: {
            '.': { magnet: false },
            rect: {
                stroke: 'none', 'fill-opacity': 0, width: 150, height: 250,
            },
            circle: {
                r: 6, //circle radius
                magnet: true,
                stroke: 'none'
            },
            'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
            '.node-text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' },

JointJS附加文本不可见

1 个答案: