JointJS ライブラリでカスタム要素を作成しました。オブジェクトには、2 つのテキストが関連付けられた 2 つのネストされた Rectangle があります。
モデル内で彼の属性を変更したい...私はJQUERYを介して属性とcssを変更し、そのIDを介してのみ取得します。
モデルの属性を変更してから、ノードを更新して新しい外観を表示したいと考えています。
うまく説明できない場合は申し訳ありませんが、jsFiddle を残します ->
追加情報が必要な場合は、お問い合わせください。
ありがとうございました。
これが私のカスタムオブジェクトを定義するクラスで、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)';
}
});