如何为 mxGraph 顶点设置 box-sizing 模型？答案

【问题标题】：How to set box-sizing model for mxGraph vertexes?如何为 mxGraph 顶点设置 box-sizing 模型？
【发布时间】：2019-08-05 15:04:33
【问题描述】：

当使用mxHierarchicalLayout 和strokeWidth > 1 时，所有最顶部和最左侧顶点的边框将无法正确显示。请看下面的截图：

这是因为边框宽度不计入总顶点高度/宽度。

是否有可能为mxGraph 设置框大小模型，就像box-sizing: border-box; 为 CSS 工作一样？

如果不是，是否可以在布局引擎布局后将整个图形上下文向下或向左移动？

【问题讨论】：

“如果不是，是否可以在布局引擎放置后将整个图形上下文向下或向左移动” - Yes there are workarounds for this，关于您问题的第一个比例，您想要什么究竟要做什么？无论文本长度如何，都使所有顶点的大小相同？
我只想正确绘制最顶部顶点的边框。它在分层布局后获得 Y 位置 0，因此仅部分绘制粗边框。

标签： javascript css flowchart mxgraph

【解决方案1】：

我认为边界绘制正确，但问题是最左边和最上面顶点的边界被隐藏了，因为它们are placed "behind" the canvas，所以解决方法是move your whole graph a little to the bottom and to the right dependening on your needs。执行此操作的代码：

let layout = new mxHierarchicalLayout(graph);
layout.execute(graph.getDefaultParent());
graph.model.beginUpdate();
let children = graph.getChildCells();
graph.moveCells(children, undefined , 20);  // assuming you want to "move your graph 20px to the bottom"
graph.model.endUpdate();

您可以使用相同的功能来移动horizontally 您的图表（左右），检查 moveCellsmxGraph.js的函数

mxGraph.prototype.moveCells = function(cells, dx, dy, clone, target, evt, mapping)

【讨论】：