从MX.Graph中的Draw.io导入自定义库的形状

如何解决从MX.Graph中的Draw.io导入自定义库的形状

我目前正在使用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>

提前谢谢！

解决方法

根据您的需要，我知道有两种方法。

将draw.IO作为iframe嵌入到您的应用中，并创建一个在侧栏上添加自己的图标调色板的插件。您可以观看p1插件代码，然后将其复制plugin list in draw.io,look for the p1 plugin 。 code example of how to integrate draw.io in your app 提示：如果未加载pulgins，请检查插件文件夹链接。

如果在自己的应用程序上添加顶点，请创建自己的样式，然后在创建时重复使用。

updateStyles（）

{

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,80,'transformer');

} finally {

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

}