JointJS Rappid Toolkit 菱形？答案

【问题标题】：JointJS Rappid Toolkit Diamond shape?JointJS Rappid Toolkit 菱形？
【发布时间】：2014-01-01 14:49:36
【问题描述】：

我想在 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，但似乎没有这样的对象。

【问题讨论】：

标签： javascript jointjs rappid

【解决方案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' }
   }
})

注意由 SVG 路径数据 (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) 组成的 d 属性。

【讨论】：