JointJS Rappid Toolkit钻石造型?

时间:2014-01-01 14:49:37

标签: javascript jointjs rappid

我想在Rappid模板上添加菱形,就像我添加了矩形和圆圈一样。

var r = new joint.shapes.basic.Rect({ 
    position: { x: 10, y: 10 }, size: { width: 50, height: 30 },
    attrs: { rect: { fill: '#2ECC71' }, text: { text: 'rect', fill: 'black' } }
});
var c = new joint.shapes.basic.Circle({ 
    position: { x: 70, y: 10 }, size: { width: 50, height: 30 },
    attrs: { circle: { fill: '#9B59B6' }, text: { text: 'circle', fill: 'white' } }
});



stencil.load([r, c]);

我尝试使用新的joint.shapes.basic.Diamond,但似乎没有这样的对象。

1 个答案:

答案 0 :(得分:1)

您可以使用joint.shapes.basic.Path创建任意形状的元素。钻石或菱形可以定义为:

var rhombus = new joint.shapes.basic.Path({
   size: { width: 70, height: 70 },
   attrs: {
       path: { d: 'M 30 0 L 60 30 30 60 0 30 z', fill: 'blue' },
       text: { text: 'Rhombus', 'ref-y': .5, fill: 'white' }
   }
})

请注意d属性,其中包含SVG路径数据(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)。