Question

我得到了这个联合js代码，其中包含一些内容和链接：

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#div1'),
    interactive: false,
    width: 1200,
    height: 1200,
    model: graph,
    gridSize: 1
});
    var rect1 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var rect2 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value + 80 },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var link{{ pre }} = new joint.dia.Link({
        source: { id: rect1.id },
        target: { id: rect2.id },
        vertices: [{ x: initialx, y: syposition.y + 23 }, { x: initialx, y: typosition.y + 23 }],
    });

正如你所看到的，我将纸质属性交互为'false'，因此用户无法拖放任何元素或删除链接，但实际上他希望他能按照自己的意愿拖动链接顶点，我该怎么办？它？，联合.min.css中的属性？或者从这个代码是一种方式??

提前致谢！

Answer 1

首先，您可以将interactive定义为一个函数，为链接返回true，为元素返回false。这使链接具有交互性，而元素则没有。

var paper = new joint.dia.Paper({
  interactive: function(cellView) {
    return cellView.model.isLink();
  }
});

根据文件

互动 - 如果设置为false，则与元素和链接进行互动禁用。如果它是一个函数，将使用单元格视图调用它动作及其评估方法的名称（＆＃39; pointerdown＆＃39; ， ＆＃39; pointermove＆＃39; ，...）。如果此函数的返回值为false 该行动将禁用互动。对于链接，有交互对象的特殊属性禁用默认行为。这些属性是：vertexAdd， vertexMove，vertexRemove和arrowheadMove。通过设置任何这些属性为false，您可以禁用相关的默认操作链接。

通过执行以下操作，您只能启用顶点移动。

interactive: function(cellView) {
  if (cellView.model.isLink()) {
    return {
      vertexAdd: false,
      vertexRemove: false,
      arrowheadMove: false,
      // vertexMove: true
    }
  }
  return false;
}

http://jsfiddle.net/kumilingus/03omcuLm/

仅使联合js中的链接具有交互性

1 个答案: