1

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

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

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

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

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

4

2 回答 2

0

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

在您的示例中，您没有在“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);
    }
}),
于 2012-07-05T21:42:22.007 回答
0 
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);
}

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

于 2012-07-09T08:32:41.330 回答