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創建自定義形狀，鑽石，六角形

回答

相關問題