如何在 diamond 中创建两个输入端口和两个输出端口？答案

【问题标题】：How to create two input ports and two output ports in diamond?如何在 diamond 中创建两个输入端口和两个输出端口？
【发布时间】：2012-07-03 15:29:53
【问题描述】：

我想创建两个输入端口和两个输出端口，我已经尝试过菱形：

this.createPort("input");
this.createPort("input");
this.createPort("output");
this.createPort("output");

但是上面的代码不能按要求工作，它确实创建了端口，但是在这里和那里，而不是在钻石的顶点上。所以请任何人建议我如何做到这一点。

我也试过这个例子：http://draw2d.org/graphiti/jsdoc/#!/example/galerie_shape_analog，（恢复桥的例子类似于菱形）但是这个例子包含混合端口，现在我想要的是输入和输出端口。

所以如果有人有任何想法，请告诉我。在此先感谢:)

【问题讨论】：

标签： draw2d-js graphiti-js

【解决方案1】：

解决方案是使用定位器。定位器响应布局端口相对于它的父形状。

在您的示例中，您没有在“createPort”方法中使用定位器....在这种情况下端口将以默认行为布局。

-> 左侧的 InputPorts

-> 右侧的输出端口

这里是一个形状的 init 方法示例，它使用定位器添加一些端口。

/**
 * @constructor
 * Create a new instance
 */
init:function(){
   this._super();

   this.inputLocator = new this.MyInputPortLocator();
   this.outputLocator = new this.MyOutputPortLocator();

   this.createPort("hybrid",this.inputLocator);
   this.createPort("hybrid",this.inputLocator);

   this.createPort("hybrid",this.outputLocator);
  this.createPort("hybrid",this.outputLocator);

简单定位器的代码：

// custom locator for the special design of the ResistorBridge Input area
MyInputPortLocator : graphiti.layout.locator.Locator.extend({
    init:function( ){
      this._super();
    },    
    relocate:function(index, figure){
        var w = figure.getParent().getWidth();
        var h = figure.getParent().getHeight();

        figure.setPosition(w/2+1, h*index);
    }
}),

【讨论】：

【解决方案2】：

MyInputPortLocator : graphiti.layout.locator.Locator.extend({
    init:function( ){
      this._super();
    },    
    relocate:function(index, figure){
        var w = figure.getParent().getWidth();
        var h = figure.getParent().getHeight();

        figure.setPosition(w/2+1, h*index);
    }
}),

MyOutputPortLocator : graphiti.layout.locator.Locator.extend({
    init:function( ){
      this._super();
    },    
    relocate:function(index, figure){
        var w = figure.getParent().getWidth();
        var h = figure.getParent().getHeight();

        figure.setPosition(w*(index-2), h/2);
    }
}),

init:function(){
    this._super();

    this.inputLocator = new this.MyInputPortLocator();
    this.outputLocator = new this.MyOutputPortLocator();

    this.createPort("input",this.inputLocator);
    this.createPort("input",this.inputLocator);

    this.createPort("output",this.outputLocator);
    this.createPort("output",this.outputLocator);
}

我已经尝试过类似的方法，但是当我在所有地方使用“混合”端口时，上面的代码工作正常，但是当我使用两个输入和两个输出端口时，端口对齐会失真，请更正我上面的代码，以便所有端口都是在它们各自的菱形顶点上。

【讨论】：