mxCompactTreeLayout 咋么改变树图的方向
时间: 2024-02-23 16:58:18 浏览: 50
mxCompactTreeLayout是一个用于生成紧凑树形结构的布局算法,它默认是从上往下的方向。如果您想要改变树图的方向,可以使用mxGraph的旋转函数mxUtils.getRotatedPoint()来实现。
具体来说,您可以将mxCompactTreeLayout生成的树图旋转90度或者270度,从而实现从左到右或从右到左的布局方向。您可以通过以下代码实现:
```
var layout = new mxCompactTreeLayout(graph, false);
layout.execute(graph.getDefaultParent());
var bounds = graph.getGraphBounds();
var cx = bounds.x + bounds.width / 2;
var cy = bounds.y + bounds.height / 2;
// 旋转90度
var angle = 90;
var rad = mxUtils.toRadians(angle);
var cos = Math.cos(rad);
var sin = Math.sin(rad);
var transform = new mxGeometry();
transform.rotate(angle, new mxPoint(cx, cy));
graph.view.setTranslate(-cx, -cy);
graph.view.setStates(graph.view.createState({}));
// 通过旋转变换来改变布局方向
graph.view.updateSvgTransform();
graph.view.validate();
// 调整树图位置
var dx = (graph.container.clientWidth - bounds.height) / 2;
var dy = (graph.container.clientHeight - bounds.width) / 2;
graph.view.setTranslate(dx, dy);
```
其中,angle可以设置为90或270,表示旋转的角度。在旋转之前,需要先将树图移动到画布中心点(cx, cy)处,然后再进行旋转变换。最后,还需要调整树图的位置,使其居中显示。