1

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

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

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

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

4

1 回答 1

1

万一有人需要解决方案，这就是我最终提出这个问题的方式。该解决方案的灵感来自于 shape.xml（来自 源代码的第 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>

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

于 2017-08-08T18:28:31.927 回答