Question

在Grapheditor的Sidebar.js中，有一些我感兴趣的 createVertexTemplateEntry（）调用。特别是当图像设置为样式时的情况，即：

this.createVertexTemplateEntry('image;html=1;image=someobject100x100.png', 100, 100, '', 'title', tags)

我想保留这种特殊的样式，并且能够定义连接引脚，例如，2个输入连接和1个x，y坐标输出（x，y \ in [0,1]）。目前我通过将"shape=mxgraph.modules.someobject;"附加到样式字符串来实现，其中N / S字段从 modules.xml 的某个对象节点读取。但是，一旦我将"shape=.."添加到现有的"image;..."样式，则图像不再显示，但输入/输出连接引脚已正确定位。

问题：有没有办法让它保持图像样式并能够定义连接引脚坐标（通过样式字符串或通过xml模板定义猜测）？

Answer 1

任何人都需要解决方案，这就是我最终提出这个问题的方式。解决方案的灵感来自shapes.xml（来自source code的第38行）：

定义要添加到调色板的形状（来自Sidebar.js文件的功能）

this.createVertexTemplateEntry( 'shape=mxgraph.module.type;', 100, 100,  '', 'Type', null, null, '')

在Stencils / module.xml中添加形状元素，约束描述输入输出引脚坐标（名为N，S），形状矩形 rect 和具有朝向png图片的路径的图像元素：

<shapes name="mxgraph.module">
  <shape aspect="variable" h="100" name="Type" strokewidth="1" w="100">
    <connections>
      <constraint name="N" perimeter="0" x="0.5" y="0"/>
      <constraint name="S" perimeter="0" x="0.5" y="1"/>
    </connections>
    <foreground>
      <rect h="60" w="30" x="0" y="0"/>
      <fillstroke/>
    </foreground>
  </shape>
  <shape aspect="variable" h="60" name="Workbench Connection" strokewidth="1" w="30">
    <connections>
      <constraint name="N" perimeter="0" x="0.5" y="0"/>
      <constraint name="S" perimeter="0" x="0.5" y="1"/>
      <constraint name="E" perimeter="0" x="0" y="0.5"/>
    </connections>
    <foreground>
      <rect h="100" w="100" x="0" y="0"/>
      <fillstroke/>
       <image src="assets/picture.png" x="0" y="0" w="100" h="10" flipH="0"/>
    </foreground>
  </shape>
</shapes>

这样，可以定义输入/输出引脚并保留覆盖。

自定义Jgraph mxCell的连接输入和输出

1 个答案: