javascript - JointJS Rappid Toolkit 菱形？

Question

我想在 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]);

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

Answer 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 )。