Wie kann ich das ändern das attrs eines benutzerdefinierten Objekts in JointJS?

Ich erstellt ein benutzerdefiniertes element mit dem JointJS Bibliothek . Das Objekt habe zwei verschachtelte Rechtecke mit zwei zugehörigen Texte.

Den ich ändern will seine atributtes innerhalb de Modell... bekomme ich nur durch JQUERY ändern Sie seine Attribute und css, über deren ids.

Ich ändern wollen, attrs im Modell und aktualisieren Sie dann die Knoten um zu zeigen, seine neuen look.

Sorry, wenn ich nicht erklären kann es gut genug, dass ich es ein jsFiddle ->

http://jsfiddle.net/y9ucn/

Wenn Sie weitere Informationen benötigen, Fragen Sie bitte nach.

Danke.

Hier ist die Klasse, die definiert meine eigene Objekt und auf der jsfiddle Sie spielen können, ein Beispiel:

MyRect = joint.shapes.basic.Generic.extend({
        markup: [
            '<g class="rotatable">',
            '<g class="scalable">',
            '<rect class="firstRect"/><rect class="secondRect"/>',
            '</g>',
            '<text class="textFirstRect"/><text class="textSecondRect"/>',
            '</g>'].join(''),

        defaults: joint.util.deepSupplement({

            type: 'basic.MyRect',
            attrs: {
                '.firstRect': {
                    'stroke': '#0A1317',
                        'stroke-width': 1,
                        'fill': '#DBF024',
                        'width': 100,
                        'height': 30,
                },
                    '.secondRect': {
                    'stroke': '#0A1317',
                        'stroke-width': 1,
                        'fill': '#DBF024',
                        'width': 100,
                        'height': 30,
                },


                    '.textFirstRect': {
                    'ref': '.firstRect',
                        'ref-x': .5,
                        'ref-y': .5,
                        'y-alignment': 'middle',
                        'x-alignment': 'middle',
                        'fill': '#333',
                        'font-size': 12,
                        'font-family': 'Calibri,Arial',


                },
                    '.textSecondRect': {
                    'ref': '.secondRect',
                        'ref-y': .5,
                        'ref-x': .5,
                        'y-alignment': 'middle',
                        'x-alignment': 'middle',
                        'fill': '#333',
                        'font-size': 12,
                        'font-family': 'Calibri,Arial'
                }

            }
        }, joint.shapes.basic.Generic.prototype.defaults),

        initialize: function () {

            _.bindAll(this, 'format');
            this.format();
            joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
        },

        format: function () {
            var attrs = this.get('attrs');
            attrs['.secondRect'].transform = 'translate(0,30)';
        }
    });
InformationsquelleAutor Rosencrantz | 2014-03-03
Schreibe einen Kommentar