G6 - 网图编辑器（锚点禁止连接）

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>网图编辑器（锚点禁止连接）</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
var Util = G6.Util;
var defaultAnchorPoints = [
      [0, 0.25],
      [0, 0.5],
      [0, 0.75],
      [1, 0.25],
      [1, 0.5],
      [1, 0.75],
      [0.25, 0],
      [0.5, 0],
      [0.75, 0],
      [0.25, 1],
      [0.5, 1],
      [0.75, 1]
    ];

// 锚点样式
G6.Global.anchorPointStyle = {
  fill: '#108EE9',
  lineWidth: 0.1,
  r: 4
};

// 锚点激活样式
G6.Global.anchorPointHoverStyle = {
  lineWidth: 6,
  stroke: '#108EE9',
  strokeOpacity: 0.2
};

// 第一步：注册节点
G6.registNode('customNode', {
  draw: function(cfg, group) {
    var shape = group.addShape('rect', {
      attrs: {
        x: cfg.x,
        y: cfg.y,
        width: 80,
        height: 80,
        fill: '#fff',
        stroke: 'green'
      }
    });
    return shape;
  },
  getAnchorPoints: function(cfg){
    var model = cfg.model;
    return model.anchorPoints;
  }
}, 'rect');

$('#c1').append('<button id="addCircle">圆形</button>');
$('#c1').append('<button id="addRect">方形</button>');
$('#c1').append('<button id="addCustom">自定义形</button>');
$('#c1').append('<button id="save">保存</button>');
var addCircle = $('#addCircle');
var addRect = $('#addRect');
var addCustom = $('#addCustom');
var save = $('#save');

var data = {
  nodes: [{
    shape: "customNode",
    x: 370,
    y: 30,
    id: "27c5046d",
    anchorPoints: Util.clone(defaultAnchorPoints)
  }, {
    shape: "customNode",
    x: 430,
    y: 330,
    id: "99d69b85",
    anchorPoints: Util.clone(defaultAnchorPoints)
  }, {
    shape: "customNode",
    x: 650,
    y: 220,
    id: "f8cfdbd2",
    anchorPoints: Util.clone(defaultAnchorPoints)
  }, {
    shape: "customNode",
    x: 80,
    y: 210,
    id: "3fabea06",
    anchorPoints: Util.clone(defaultAnchorPoints)
  }],
  edges: []
};

var net = new G6.Net({
  id: 'c1',      // 容器ID
  mode: 'edit',
  height: 450    // 画布高
});
var cnodes; // 被禁止操作的节点集
var behaviourSignal = net.get('behaviourSignal');
var dragging = false;

net.removeBehaviour(['hoverNodeShowAnchor', 'dragEdgeEndHideAnchor', 'dragNodeEndHideAnchor']);

addCircle.on('click', function(ev){
  net.beginAdd('node', {
    shape: 'circle'
  });
});
addRect.on('click', function(ev){
  net.beginAdd('node', {
    shape: 'rect'
  });
});
addCustom.on('click', function(ev){
  net.beginAdd('node', {
    shape: 'customNode'
  });
});

save.on('click', function(ev){
  console.log(JSON.stringify(net.save()));
});

net.on('dragstart', function(ev){
  dragging = true;
});
net.on('dragend', function(ev){
  dragging = false;
});

net.on('mouseenter', function(ev) {
  var shape = ev.shape;
  if(shape && shape.hasClass('anchor-point') && !dragging) {
    net.beginAdd('edge', {
      shape: 'polyLineFlow'
    });
  }
});

net.on('mouseleave', function(ev) {
  var shape = ev.shape;
  var item = ev.item;
  var nodes = net.getNodes();

  if(shape && shape.hasClass('anchor-point')) {
    if(dragging) {
      if(!cnodes && behaviourSignal.draggingEdge) {
        cnodes = [];
        Util.each(nodes, function(node){
          if(item !== node){
            cnodes.push(node);
          }
        });
        Util.each(cnodes, function(node){
          var model = node.getModel();
          var anchorPoints = model.anchorPoints;
          Util.each(anchorPoints, function(anchorPoint){
            if(rdb()) {
              anchorPoint[2] = {
                linkable: false,
                style: {
                  fill: '#D0D0D0'
                },
                hoverStyle: {
                  stroke: null
                }
              };
            } else {
              anchorPoint[2] = {
                linkable: true,
                style: {
                  fill: '#14B47E'
                },
                hoverStyle: {
                  stroke: '14B47E'
                }
              };
            }
          });

          net.update(node, {
            anchorPoints: anchorPoints
          });
          net.showAnchor(node);
        });
      }
    } else {
      net.changeMode('edit');
    }
  }
});

// 拖拽边结束后重置锚点
net.on('dragedgeend', function(ev){
  var shape = ev.shape;
  var item = ev.item;
  var edge = ev.edge;
  // 如果没连接到锚点则删除该连接线
  if(shape && !shape.hasClass('anchor-point')) {
    net.remove(edge);
  }
  if (cnodes) {
    Util.each(cnodes, function(node){
      var model = node.getModel()
      var anchorPoints = model.anchorPoints;
      Util.each(anchorPoints, function(anchorPoint){
        anchorPoint[2] = {
          linkable: true,
          style: G6.Global.anchorPointStyle,
          hoverStyle: G6.Global.anchorPointHoverStyle
        };
      });
      net.update(node, {
        anchorPoints: anchorPoints
      });
    });
    cnodes = undefined;
  }
});
// 节点绘制后显示锚点
net.on('afteritemrender', function(ev){
  var item = ev.item;
  if(Util.isNode(item)){
    net.showAnchor(item);
  }
});
function rdb (){
  var r = Math.random();
  return r > 0.5;
}
net.source(data.nodes, data.edges);
net.render();
</script>

      </body>
    </html>
          
        
网图编辑器（锚点禁止连接）
在一些芯片设计、算法设计的领域，常需要禁用某些锚点对之间的连接。该示例旨在展示如何动态改变锚点的属性。