JointJS Erstellen von benutzerdefinierten Formen, Diamant, Hexagon

Question

Ich bin neu zu JointJS, muss ich benutzerdefinierte Formen mit JointJS erstellen, habe ich versucht, die Raute mit dem Rechteck, seine Höhe und Breite gleichen, und dann um 45 Grad drehen wie folgt,

var diamond = new joint.shapes.basic.Rect({ 
     position: { x: 100, y: 100 }, 
     size: { width: 100, height: 100 }, 
     attrs: { diamond: { width: 100, height: 30 } } 
    }); 
    diamond.attr({ 

     rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' }, 
     text: { 
      text: 'Diamond', fill: '#3498DB', 
      'font-size': 18, 'font-weight': 'bold', 
      'font-variant': 'small-caps', 
      'text-transform': 'capitalize' 
     } 
    }); 
    diamond.rotate(45); 

Allerdings wird der Text im Inneren des Rechtecks ​​auch gedreht, gehen Sie irgendwelche Ideen, wie kann ich .... auch muss ich Sechseck mit einem Etikett erstellen ... wird jede Hilfe sehr geschätzt ....

Vielen Dank im Voraus,

Mayuri

Answer 1

Es ist nicht erforderlich, das gesamte Element zu drehen. Versuchen Sie, ein transform Attribut zu joint.dia.basic.Rect Modell hinzuzufügen.

Die andere Option wäre joint.dia.basic.Path Modell zu verwenden.

var diamond = new joint.shapes.basic.Path({ 
    size: { width: 100, height: 100 }, 
    attrs: { 
     path: { d: 'M 30 0 L 60 30 30 60 0 30 z' }, 
     text: { 
      text: 'Diamond', 
      'ref-y': .5 // basic.Path text is originally positioned under the element 
     } 
    } 
}); 

Um eine Sechseckform, verwenden Sie das joint.dia.basic.Path Modell wieder, aber diesmal verwenden Sie die folgenden Pfaddaten zu erreichen.

path: { d: 'M 50 0 L 0 20 0 80 50 100 100 80 100 20 z'} 

Zuletzt können Sie eine benutzerdefinierte Form mit SVG Polygon in seinem Markup erstellen.

Answer 2

Dank viel Roman, ich folgte erste Lösung für Diamant und es funktionierte wie ein Charme!

hier ist dies für jeden einzelnen suchen Rautenform mit joint.js zu machen, ich habe folgendes in joint.js

joint.shapes.basic.Diamond = joint.shapes.basic.Generic.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>', 

    defaults: joint.util.deepSupplement({ 

     type: 'basic.Rect', 
     attrs: { 
      'rect': { fill: '#FFFFFF', stroke: 'black', width: 1, height: 1,transform: 'rotate(45)' }, 
      'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' } 
     } 

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

Und für seine Umsetzung wie folgt hinzugefügt,

var diamond = new joint.shapes.basic.Diamond({ 
     position: { x: 100, y: 100 }, 
     size: { width: 100, height: 100 }, 
     attrs: { diamond: { width: 100, height: 30 } } 
    }); 
    diamond.attr({ 

     rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' }, 
     text: { 
      text: 'Diamond', fill: '#3498DB', 
      'font-size': 18, 'font-weight': 'bold', 
      'font-variant': 'small-caps', 
      'text-transform': 'capitalize' 
     } 
    });