GoJS 浏览器窗口缩放后自动居中对齐
GoJS 大约 3281 字需求
因为GoJS
开启了可以拖动和缩放后,在窗口大小充足的情况下,默认不会进行自动居中对齐的,需求是在浏览器窗口缩小和最大化时,GoJS
中的元素能居中对齐。
contentAlignment
Diagram
中可以设置contentAlignment
内容对齐,但这个设置就导致元素将无法拖动,每次拖动后都将被GoJS
自动居中对齐。
而initialContentAlignment
则是在初始化时居中对齐,对于缩放后无法起到再次居中的效果
alignDocument
alignDocument
方法可以手动设置与文档对齐方式,但如果只使用这个API
缩放几次后还是会出现无法对齐的现象。
解决方法
在onresize
事件中,先将contentAlignment
设置为Center
,再调用alignDocument
方法让元素在document
和viewport
中都居中,然后再将contentAlignment
改为Default
。
let that = this;
window.onresize = function () {
console.log("resize");
that.diagram.contentAlignment = go.Spot.Center;
that.diagram.alignDocument(go.Spot.Center, go.Spot.Center);
that.diagram.contentAlignment = go.Spot.Default;
}
效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.38/go.js" crossorigin="anonymous"></script>
<style>
#myDiagramDiv canvas {
outline: none;
}
</style>
</head>
<body>
<div id="myDiagramDiv" style="height:300px;background: #E4E7EB"></div>
<script>
var $ = go.GraphObject.make;
var diagram = $(go.Diagram, "myDiagramDiv",
{
allowMove: true,
allowSelect: true,
hasVerticalScrollbar: false,
hasHorizontalScrollbar: false,
}
);
diagram.add(
$(go.Node, "Vertical",
$(go.Panel, "Auto",
$(go.Shape, "Rectangle",
{
stroke: "#00FFFF",
strokeWidth: 2,
fill: "#F0F8FF",
desiredSize: new go.Size(120, 60),
},
),
$(go.TextBlock,
{margin: 3, stroke: "green", text: "程序员技术之旅"},
),
{
contextClick: function (e, node) {
node.elements.each(function (element) {
console.log(element);
})
},
}
),
)
);
let that = this;
window.onresize = function () {
console.log("resize");
that.diagram.contentAlignment = go.Spot.Center;
that.diagram.alignDocument(go.Spot.Center, go.Spot.Center);
that.diagram.contentAlignment = go.Spot.Default;
}
</script>
</body>
</html>
Diagram 文档
阅读 469 · 发布于 2021-11-24
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Java 中 Thread 的 join 方法阅读 882
-
数据结构:双向链表阅读 450
-
Docker 部署 Jenkins阅读 290
-
MySQL 全文检索设置停止词阅读 1499
-
使用 logrotate 处理日志阅读 2151
-
Linux 升级 OpenSSL 版本阅读 3616
-
k3s Helm Error INSTALLATION FAILED Kubernetes cluster unreachable阅读 330
-
Linux 之 CentOS 安装 JDK 及 JRE阅读 1857
-
Windows WSL 下 Docker 启动报 waiting for init preliminary setup caused: EOF: unknown 错误阅读 1130
-
Docker 编写 Dockerfile 制作 Spring Boot 镜像阅读 371