0

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

<!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>

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

4

2 回答 2

1

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

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);
#paper {
  display: inline-block;
  border: 1px solid gray;
}
<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>

于 2016-05-09T07:03:02.207 回答
-2

只需更改标记。但这次将矩形更改为圆形，并根据新形状更改属性。

于 2015-04-20T13:59:55.183 回答