1

我目前正在使用 javascript 中的 mxGraph 库，我正在尝试在 draw.io 中创建自己的形状，以导出它们，然后使用 mxGraph 库在我自己的程序中尽可能多地重用它们。

到目前为止，我已经尝试创建一个自定义库，其中包含我所有的形状。我已经将它导出为 XML，这给了我一个半编码的 XML 文件。然后，我想在我自己的应用程序中导入那个 mxLibrary，这样我就可以重用这些形状来创建我自己的图表。我不知道如何处理那个 XML 文件。

我也尝试从Extras -> Edit Diagram编解码器中获取 XML 并重新导入它，然后使用mxGraph#addCells但形状不再分组，我似乎无法找到如何克隆它们。

我的目标实际上是在某个地方拥有我的形状/单元格列表，我可以随时重复使用。

如果这是不可能的，我该怎么做呢？我还查找了如何创建自己的形状（使用 redrawPath 和样式的东西），但它看起来真的很长而且很无聊。

下面是 XML 外观的示例。形状是一个简单的双正方形。

<mxlibrary>[{"xml":"xVNBbsIwEHyN78EugjOhcOqpLzDJgi05XstZSPJ7trFbiAqCqpV6sLQ7O2N7xrJQZdNvow7mDWtwQr0KVUZESlXTl+CckIWthVoLKQteQm7uTGfjtAg6gqdnBDIJTtodISEJaGlwGThEPIZMg0jQT46q0HuoSO8+6cX3K4zUfP4WsAGKA1M6W5NJjGVWGbAHQ1NMt/keX8qLHy6ypdv21GN7nbEE70FXH33HDyHUylDDO65nXOo2sD1u9rYH3nV1N4lrx/LfHL/8veO9da5Eh5Exjx5+GUIWzJNgmHRXAS1uBLT4eUDcXn7TOJt8tjM=","w":80,"h":80,"aspect":"fixed","title":"custom_shape_1"}]</mxlibrary>

先感谢您！

4

1 回答 1

0

我知道有两种方法可以做到这一点，具体取决于您的需要。

  1. 将 draw.IO 作为 iframe 嵌入到您的应用中，并创建一个插件，在侧栏上添加您自己的图标调色板。您可以观看 p1 插件代码，并在 draw.io 中复制它的插件列表，查找 p1 插件 。如何在您的应用 提示中集成 draw.io 的代码示例：如果未加载插件，请检查插件文件夹链接。

  2. 如果您在自己的应用程序上添加顶点，请创建自己的样式，并在创建时重用它。

    更新样式（）

    {

    var style = new Object();

style[(<any>window).mxConstants.STYLE_SHAPE] = 
(<any>window).mxConstants.SHAPE_IMAGE;

style[(<any>window).mxConstants.STYLE_PERIMETER] = 
(<any>window).mxPerimeter.RectanglePerimeter;

style[(<any>window).mxConstants.STYLE_IMAGE] = 
'../assets/transformer.png';

style[(<any>window).mxConstants.STYLE_FONTCOLOR] = '#000000';

style[(<any>window).mxConstants.STYLE_WHITE_SPACE] = 'wrap';

style[(<any>window).mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';

this.graph.getStylesheet().putCellStyle('transformer', style);

    }

    每当使用 insertVertex 函数创建顶点时重用此样式。

     try {
  const parent = this.graph.getDefaultParent();

  this.graph.getModel().beginUpdate();

  const vertex = this.graph.insertVertex(parent, uuid.v4(), node, 40, 40, 80, 40, 'transformer');

} finally {

  this.graph.getModel().endUpdate();

}
于 2020-11-02T10:35:04.400 回答