mxGraph 滚轮缩放

mxGraph 滚轮缩放

先放结论

var graphContainer = document.getElementById('mxGraph');
var graph = new mxGraph(graphContainer);

// 滚轮缩放事件
mxEvent.addMouseWheelListener(function (evt, scrollUp) {
	if (scrollUp) {
  		// 如果是向上滚滚轮，放大
  		graph.zoomIn();
  	} else {
  		// 反之，缩小
    	graph.zoomOut();
  	}
  	// 取消滚轮默认行为
  	if (evt.preventDefault) {
    	evt.preventDefault();
  	} else {
    	evt.returnValue = false;
  	}
}, graphContainer);

---

评论区补充

如何修改鼠标样式

graph.container.style.cursor

使用左键拖拽

默认可以用右键拖动，如果需要左键拖动。

// 左键拖动
graph.panningHandler.useLeftButtonForPanning = true;
graph.panningHandler.ignoreCell = true;
graph.container.style.cursor = 'move';
graph.setPanning(true);

Ctrl加滚轮缩放

if (evt.ctrlKey && scrollUp) {
// 如果是向上滚滚轮，放大
graph.zoomIn()
}
if (evt.ctrlKey && !scrollUp) {
// 反之，缩小
graph.zoomOut()
}