Question

我是关于jointjs的新手，我尝试将带端口的矩形约束为一条线。

我尝试重现tutorial，该{{3}}适用于basic.Circle，basic.Rect但不适用devs.Model

有人可以告诉我为什么以及如何解决这个问题？非常感谢提前！

这是我的代码：

var width=400, height=1000;

var ConstraintElementView = joint.dia.ElementView.extend({    
pointermove: function(evt, x, y) {
    joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
}
});

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#myholder'), width: width, height: height, gridSize: 1, model: graph, elementView: ConstraintElementView});

var m1 = new joint.shapes.devs.Model({
position: { x: 20, y: 20 },
size: { width: 90, height: 90 },
inPorts: [''],
outPorts: [''],
attrs: {
    '.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
    rect: { fill: '#2ECC71' },
    '.inPorts circle': { fill: '#16A085' },
    '.outPorts circle': { fill: '#E74C3C' }
}
});

var m2=m1.clone();
m2.translate(0,300);

var earth = new joint.shapes.basic.Circle({
position: { x: 100, y: 20 },
size: { width: 20, height: 20 },
attrs: { text: { text: 'earth' }, circle: { fill: '#2ECC71' } },
name: 'earth'
});

graph.addCell([m1, m2, earth]);

Answer 1

为什么不起作用？

devs.Model未通过ContraintElementView呈现给论文。
devs.Model使用devs.ModelView进行渲染，basic.Circle和basic.Rect使用ContraintElementView。
JointJS dia.Paper首先搜索与模型在同一名称空间中定义的视图。如果找到，它会使用它。它使用了文章elementView选项中的一个。即为joint.shapes.devs.ModelView找到devs.Model但未找到basic.Circle的查看（未定义joint.shapes.basic.RectView）

如何使其有效？

将elementView纸张选项定义为函数。在这种情况下，纸张不会搜索命名空间并首先使用函数的结果。
请注意，仍然需要渲染端口devs.ModelView。

即

var paper = new joint.dia.Paper({
  elementView: function(model) {
    if (model instanceof joint.shapes.devs.Model) {
      // extend the ModelView with the constraining method.
      return joint.shapes.devs.ModelView.extend({
        pointermove: function(evt, x, y) {
          joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
        }
      });
    }
    return ConstraintElementView;
  }
});

http://jsfiddle.net/kumilingus/0bjqg4ow/

推荐的方法是什么？

JointJS v0.9.7+
不使用限制元素移动的自定义视图
使用restrictTranslate纸张选项。

即

var paper = new joint.dia.Paper({  
  restrictTranslate: function(elementView) {
     // returns an area the elementView can move around.
     return { x: 100, y: 0, width: 0, height: 1000 }
  };
});

http://jsfiddle.net/kumilingus/atbcujxr/

Answer 2

我认为这可以帮到你： http://jointjs.com/demos/devs

Joint JS - 如何在shapes.devs上应用事件

2 个答案: