Joint.js添加具有路徑類的自定義端口。爲自定義元素

我想要做的是使用自定義類的端口和路徑的元素，以便我可以添加自定義路徑和我自己的標記爲ports.This方法當我創建一個元素，我會通過動態它的形狀路徑就像路徑類的元素行爲一樣，因爲我也從PortsModelInterface擴展了，我也將有我自己的端口標記。這整個努力是使svg可縮放zomming。以前我是用HTML自定義元素與工作正常，但自定義元素的HTML我的自定義端口不結垢縮放Joint.js添加具有路徑類的自定義端口。爲自定義元素

var graph = new joint.dia. 
var paper = new joint.dia.Paper({ 
    el: $('#paper'), 
    width: 800, 
    height: 600, 
    gridSize: 1, 
    model: graph, 
    snapLinks: true, 
    embeddingMode: true 
}); 
joint.shapes.custom1={}; 
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, { 
     markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>', 
     portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>', 
     defaults: joint.util.deepSupplement({ 
      type: 'html.Element', 
      size: { width: 200, height: 110 }, 
      inPorts: [], 
      outPorts: [], 
      attrs: { 
       '.': { magnet: true}, 
       rect: { 
        stroke: 'none', 'fill-opacity': 0, width: 300, height: 210, 
       }, 
       circle: { 
        r: 6, //circle radius 
        magnet: true, 
      left:0, 
        stroke: 'gray' 
       }, 

       '.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0}, 
       '.outPorts circle': { fill: 'gray', type: 'output' } 
      } 
     }, joint.shapes.basic.Generic.prototype.defaults), 
     getPortAttrs: function (portName, index, total, selector, type) { 

      var attrs = {}; 
      var portClass = 'port' + index; 
      var portSelector = selector + '>.' + portClass; 
      var portCircleSelector = portSelector + '>circle'; 
      attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } }; 
      attrs[portSelector] = { ref: 'rect', 'ref-x': (index + 1) * (0.55/total)}; 
      if (selector === '.outPorts') { 
      attrs[portSelector]['ref-dy'] = 15; 
     } 
      return attrs; 
     } 
    })); 
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({ 

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

    defaults: joint.util.deepSupplement({ 

     type: 'basic.Path', 
     size: { width: 60, height: 60 }, 
     attrs: { 
      'path': { fill: '#FFFFFF', stroke: 'black' }, 
      'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' } 
     } 
    }, joint.shapes.basic.Generic.prototype.defaults) 

}); 

var a2 = new joint.shapes.custom1.Atomic({ 
    position: { x: 50, y: 260 }, 
    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 
     } 
    }, 
    inPorts: ['in'], 
    outPorts: ['out'] 
}); 
graph.addCells([a2])

元素在圖形添加，但某些端口如何不顯示。我沒有適當的概念添加類，所以請任何幫助將不勝感激。謝謝。 Fiddle example

來源

2015-07-12 Achilles

這是什麼都與'backbone.js'辦？ – ivarni

Joint.js構建在backbone.js之上，這個擴展類的整個機制源於骨幹。不應該添加這個標籤？ – Achilles

是否有無論如何你可以做一個小提琴或什麼東西，所以我們可以運行代碼，看看它失敗，然後嘗試看看我們是否可以使它工作？我不確定你會找到一個有joint.js的人，但是如果你給我們一個玩的機會，我們可能會發現它。 –

我建議爲形狀和端口定義具有自定義標記的元素。這兩個標記都應該包含SVG路徑，因此您可以通過model.attr()設置任意路徑數據d。

joint.shapes.devs.GenericModel = joint.shapes.devs.Model.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><path class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>', 
    portMarkup: '<g class="port port<%= id %>"><path class="port-body"/><text class="port-label"/></g>', 

    defaults: joint.util.deepSupplement({ 
     type: 'devs.GenericModel' 
    }, joint.shapes.devs.Model.prototype.defaults) 
});

告訴紙使用devs.ModelView進行渲染。

joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;

現在，您可以設置或更改任何時候你想要的形狀和端口d屬性。

var model = new joint.shapes.devs.GenericModel({ 
    attrs: { 
     '.body': { d: 'M 0 0 0 50 50 50 z'}, 
     '.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'} 
    } 
}); 

model.attr('.body/d', 'M 25 0 50 50 0 50 z');

JS小提琴：http://jsfiddle.net/kumilingus/kge023bc/

來源

2015-07-27 10:09:06 Roman

這正是我渴望的。謝謝。 – Achilles

Joint.js添加具有路徑類的自定義端口。爲自定義元素

回答

相關問題