CODEWITHSUNDEEP
javascriptjquerysvgjointjs
Andrius Čekanauskas
Andrius Čekanauskas

Reputation: 91

How to create a custom shape in JointJs, which consists out of 2 or more basic shapes?

I want to create a shape in Joint JS.

Which I could initialize and lets say have rectangle and circle as one shape.

As far as I know, only path method is something near.

Upvotes: 4

Views: 4145

Answers (1)

Andrius Čekanauskas
Andrius Čekanauskas

Reputation: 91

I have just come to an answer. I needed to extend the joint.dia.Element class. Here is how the code looks, which draws a rectangle with two circles(extension):

joint.shapes.basic.myShape = joint.dia.Element.extend({

            markup: '<g class="rotatable"><g class="scalable"><rect class="outer"/><circle class="inner"/><circle class="inner1"/></g></g>',
            defaults: joint.util.deepSupplement({
                type: "basic",
                size: {
                    width: 20,
                    height: 20
                },
                attrs: {
                    ".outer": {
                        stroke: 'black',
                        'fill-opacity': 1,
                        width: 10,
                        height: 15
                    },
                    ".inner": {
                        transform: "translate(10, 10)",
                        r: 8,
                        fill: "#000000"
                    },
                    ".inner1": {
                        transform: "translate(10, 10)",
                        r: 6,
                        fill: "#fff"
                    }
                }
            }, joint.dia.Element.prototype.defaults)
});

initializing (to stencil, but directly to graph is possible too by using, graph.addCell):

 var r1 = new joint.shapes.basic.myShape({
            size: {
                width: 60,
                height: 60
            }
        });

 stencilData.load([r1], 'basic');

Upvotes: 5

Related Questions