Question

我使用JointJS库创建了一个自定义元素。该对象有两个嵌套的矩形，带有两个相关的文本。

我想改变他在模型中的属性...我只通过JQUERY通过它的ID改变他的属性和css。

我想更改模型中的attrs，然后更新节点以显示他的新外观。

对不起，如果我不能很好地解释它，我留下一个jsFiddle - ＆gt;

如果您需要其他信息，请询问。

谢谢。

这里是定义我的自定义对象的类，在jsfiddle上你可以举个例子：

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)';
        }
    });

Answer 1

您可以使用attr()方法：

cellView.model.attr('.textSecondRect/text', 'foo');

请参阅API参考：http://jointjs.com/api#joint.dia.Element:attr。

如何在JointJS中更改自定义对象的attrs？

1 个答案: