JointJS 创建自定义形状、菱形、六边形答案

【问题标题】：JointJS creating custom Shapes, Diamond, HexagonJointJS 创建自定义形状、菱形、六边形
【发布时间】：2014-02-11 08:50:10
【问题描述】：

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

但是，矩形内的文本也会被旋转，任何想法我该如何继续......另外我需要创建带有标签的六边形......任何帮助将不胜感激......

提前致谢，

真由理

【问题讨论】：

标签： jointjs

【解决方案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 多边形创建自定义形状。

【讨论】：

【解决方案2】：

非常感谢 Roman，我遵循了钻石的第一个解决方案，它的效果就像一个魅力！！

对于任何希望使用joint.js 制作菱形形状的人来说，我在joint.js 中添加了以下内容

joint.shapes.basic.Diamond = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.Rect',
        attrs: {
            'rect': { fill: '#FFFFFF', stroke: 'black', width: 1, height: 1,transform: 'rotate(45)' },
            'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
        }

    }, joint.shapes.basic.Generic.prototype.defaults)
});

对于它的实现如下，

var diamond =  new joint.shapes.basic.Diamond({
        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'
        }
    });

【讨论】：