JointJS创建自定义形状,钻石,六角形

Question

我是JointJS的新手,我需要使用JointJS创建自定义形状,我尝试使用Rectangle创建钻石形状,使其高度和宽度相同,然后旋转45度,如下所示,

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

然而,矩形内部的文本也会旋转,任何想法我怎么能继续....我还需要创建带标签的六边形...任何帮助将不胜感激....

提前致谢,

涅茧利

Answer 1

无需旋转整个元素.尝试transform向joint.dia.basic.Rect模型添加属性.

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

另一种选择是使用joint.dia.basic.Path模型.

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

为了获得六边形形状,请joint.dia.basic.Path再次使用该模型,但这次使用以下路径数据.

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

最后,您可以在其标记中创建一个带有SVG Polygon的自定义形状.