Question

我想创建一个绘图图形应用程序由圆圈和箭头组成，如下所示：http://jointjs.com/demos/shortest-path那么如何创建一个带有端口的圆圈在那个代码中，我创建了一个用矩形和箭头制作图形的应用程序，我不能制作圆形而不是矩形？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="joint.css" />
<script src="joint.js"></script>
</head>        

<body>
<div id="myholder"></div>


<script type="text/javascript">
var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: $('#myholder'),
    width: 10000,
    height: 600,
    model: graph
       /* defaultLink: new joint.dia.Link({
        attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }*/
        
});

var MyElementWithPorts = joint.shapes.basic.Generic.extend({

  defaults: joint.util.deepSupplement({

   markup: [
       '<g class="rotatable">',
       '<g class="scalable">',
       '<rect/>',
       '</g>',
       '<g class="inPorts">',
       '<g class="port1"><circle/><text/></g>',
       '</g>',
       '<g class="outPorts">',
       '<g class="port3"><circle/><text/></g>',
       '</g>',
       '</g>'
   ].join(''),

   type: 'basic.Generic',
   attrs: {
       '.': { magnet: false },
       rect: {
           width: 150, height: 250,
           stroke: 'black'
       },
       circle: {
           r: 5,
           magnet: true,
           stroke: 'black'
       },
       text: {
           fill: 'black',
           'pointer-events': 'none'
       },
       '.label': { text: 'Model', dx: 5, dy: 5 },
       '.inPorts text': { dx:-15, 'text-anchor': 'end' },
       '.outPorts text':{ dx: 15 },
       '.inPorts circle': { fill: 'PaleGreen' },
       '.outPorts circle': { fill: 'Tomato' }
   }

 }, joint.shapes.basic.Generic.prototype.defaults)
});

var rect = new MyElementWithPorts({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: {
    '.port1 text': { text: 'port1' },
    '.port2 text': { text: 'port2' },
    '.port3 text': { text: 'port3' },
    '.port4 text': { text: 'port4' },
    '.port1': { ref: 'rect', 'ref-y': .2 },
    '.port2': { ref: 'rect', 'ref-y': .4 },
    '.port3': { ref: 'rect', 'ref-y': .2, 'ref-dx': 0 },
    '.port4': { ref: 'rect', 'ref-y': .4, 'ref-dx': 0 }        
}
});




var rect2 = rect.clone();

rect2.translate(600);

rect2.attr({
    rect: { fill: 'red' },
    text: { fill: 'white', 'font-size': 15 ,text: 'noeud2'},
    '.myrect2': { fill: 'red' }
});                            
//rect2.rotate(30);
//rect2.toFront();
//rect2.embed (rect);

var link = new joint.dia.Link({
    source: { id: rect.id },
    target: { id: rect2.id }
});

graph.addCells([rect, rect2, link]);
link.attr({
    '.connection': { stroke: 'blue' },
    '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
    '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
});

paper.on('blank:pointerdblclick', function(evt, x, y) { 
    //alert('pointerdown on a blank area in the paper.')
    
    var rect3 = rect.clone();
    rect3.translate(x-80,y-80);
    rect3.attr({
    rect: { fill: 'red' },
    text: { fill: 'white', 'font-size': 15 ,text: 'noeud3'},
    '.myrect2': { fill: 'red' }
});                            

   graph.addCells([rect, rect2,rect3,link]);
       //graph.addCells(rect3);


});





</script>
</body>


</html>

＆＃13;

在该代码中，我创建了一个用矩形和箭头制作图形的应用程序，我不能制作圆形而不是矩形

Answer 1

下面的代码段显示了一个带有矩形端口的圆形元素。

＆＃13;

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 400,
  height: 200,
  gridSize: 20,
  model: graph
});

joint.shapes.devs.CircleModel = joint.shapes.devs.Model.extend({

  markup: '<g class="rotatable"><g class="scalable"><circle class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
  portMarkup: '<g class="port port<%= id %>"><rect class="port-body"/><text class="port-label"/></g>',

  defaults: joint.util.deepSupplement({

    type: 'devs.CircleModel',
    attrs: {
      '.body': {
        r: 50,
        cx: 50,
        stroke: 'blue',
        fill: 'lightblue'
      },
      '.label': {
        text: 'Circle Model',
        'ref-y': 0.5,
        'y-alignment': 'middle'
      },
      '.port-body': {
        width: 10,
        height: 10,
        x: -5,
        stroke: 'gray',
        fill: 'lightgray',
        magnet: 'active'
      }
    }

  }, joint.shapes.devs.Model.prototype.defaults)
});

joint.shapes.devs.CircleModelView = joint.shapes.devs.ModelView;

var circleModel = new joint.shapes.devs.CircleModel({
  position: {
    x: 150,
    y: 100
  },
  size: {
    width: 100,
    height: 100
  },
  inPorts: ['a'],
  outPorts: ['b']
});
graph.addCell(circleModel);

＆＃13;

#paper {
  display: inline-block;
  border: 1px solid gray;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.min.js"></script>
<div id="paper"></div>

＆＃13;

Answer 2

只需更改标记即可。但是这次更改 rect circle ，并相应地将attrs更改为新形状。

我如何在jointJS中创建一个带端口的圆圈

2 个答案: