Geek Answers Handbook

JointJS creates custom shapes, diamond, hexagon

I'm new to jointJS, I need to create custom shapes using JointJS, I tried to create a diamond shape using Rectangle, making its height and width the same, and then rotate 45 degrees as follows.

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

However, the text present inside the rectangle also rotates, any ideas how I can continue .... Also I need to create a hexagon with a label ... Any help would be greatly appreciated ....

Thanks in advance,

Mayuri

+6
source share
2 answers

No need to rotate the whole element. Try adding the transform attribute to the joint.dia.basic.Rect model.

 rect: { transform: 'rotate(45)' }

Another option is to use the joint.dia.basic.Path model.

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

To get the shape of the hexagon, use the joint.dia.basic.Path model joint.dia.basic.Path , but this time use the following path data.

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

Finally, you can create your own form with SVG Polygon in your markup.

+6
source

Thanks a lot, Roman, I followed the first diamond solution, and it worked. I liked the charm !!

this is for anyone who wants to make a diamond mold using joint.js, I added the following to 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) });

And for its implementation, as shown below,

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

More articles:


All Articles