mxgraph - 在 mxGraph 中从 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 插件代码,并在 draw.io 中复制它的插件列表,查找 p1 插件 。如何在您的应用 提示中集成 draw.io 的代码示例:如果未加载插件,请检查插件文件夹链接。
如果您在自己的应用程序上添加顶点,请创建自己的样式,并在创建时重用它。
更新样式()
{
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(); }
推荐阅读
- git - 在外部硬盘中使用 GitHub Offline 会检测到更改吗?
- java - 为什么 println 方法中的字符串显示两次?
- android - 如果激活分屏,如何全屏打开我的应用程序
- loopbackjs - Loopback:如何查询对象数组?
- dart - 使用将内容复制到剪贴板的 onClicklistener 创建一个列表视图
- mongodb - 如何在另一个容器中使用 golang Web 应用程序连接到 MONGODB 容器
- flutter - 每次我在 tabnavigator 中更改页面时,Flutter googlemaps 都会重新加载
- swift - 检测用户是否从文本字段复制文本
- python - 仅将文件 a 中的特定行写入文件 b
- python - 使用 sqlalchemy 的 pandas.read_sql 中的使用错误