如何在菱形中创建两个输入端口和两个输出端口？

Posted 2023-01-15

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

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

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

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

所以，如果有人有什么想法，请让我知道。谢谢！：

答案

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

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

->左侧的InputPorts

->右侧的输出端口

这里是一个形状初始化方法的示例，该方法在定位器上添加了一些端口。

/**
 * @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);
    
),

另一答案

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

我已经尝试过类似的操作，但是上面的代码在即时通讯中在所有地方都使用“混合”端口时可以正常工作，但是当我使用两个输入和两个输出端口时，端口对齐会失真，请更正上面的代码，以便所有端口都处于打开状态它们各自的钻石顶点。

另一答案

¿如何为输出端口添加颜色？