Question

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

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

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

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

所以，如果有人有任何想法，请告诉我。谢谢提前：）

Answer 1

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

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

- ＆GT;左边的InputPorts

- ＆GT;右侧的输出端口

这是一个形状的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);
    }
}),

Answer 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);
}

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

如何在钻石中创建两个输入端口和两个输出端口？

2 个答案: