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

我为jointJS创建新的，我需要使用JointJS创建自定义形状，我尝试使用矩形创建菱形形状，使其高度和宽度相同，然后旋转45度如下，JointJS创建自定义形状，钻石，六角形

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

然而，目前在矩形内的文字也被旋转，任何想法我如何能继续....我也需要创建一个标签六角...任何帮助将非常感激...

在此先感谢，

Mayuri

来源

2014-01-21 Mayuri Ruparel

没有必要旋转整个元素。尝试将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多边形的自定义形状。

来源

2014-01-23 00:35:37 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' 
     } 
    });

来源

2014-01-23 16:57:06

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

回答

相关问题