基礎編 ズーム

記事作成日: 2023-11-14

図.画像: ズーム

mxgraphでズーム（拡大縮小）機能を実装する方法です。

ソースコード

const graph = new mxGraph(container);
const parent = graph.getDefaultParent();
const v1 = graph.insertVertex(parent, null, 'Hello World', 20, 20, 80, 30);
graph.centerZoom = false;
container.appendChild(mxUtils.button('縮小', function(){
	graph.zoomOut()
}))
container.appendChild(mxUtils.button('拡大', function()
{
	graph.zoomIn()
}));

graph.zoomOut(),graph.zoomIn()とするだけなのでとても簡単です。

graph.centerZoom = falseとしているのは、ズームの挙動を変更するためです。