mxGraph居中的方法

JavaScript 2013-12-16 mxGraph,居中,绘图,插件

mxGraph自带了zoom相关方法,比如zoomIn和zoomOut,一级zoomTo。但有点遗憾的是没有居中的一个选项,虽然graph.fit()可以适应画布,但怎么看都别扭,于是写了一个原型居中画布的方法

Code:

mxGraph.prototype.zoomToCenter = function(margin){
	var bounds = this.getGraphBounds();
	margin = margin || 10;

	this.container.style.overflow = "hidden";

	this.view.setTranslate(
		-bounds.x -(bounds.width - this.container.clientWidth)/ 2,
		-bounds.y - (bounds.height - this.container.clientHeight) / 2
	);
	
	while( (bounds.width + margin * 2) > this.container.clientWidth 
			|| (bounds.height + margin * 2) > this.container.clientHeight ){
		this.zoomOut();
		bounds = this.getGraphBounds();
	}
	
	this.container.style.overflow = "auto";

};

参数:

margin 可选,边距,默认10

用法:

graph.zoomToCenter();      // 默认10边距
graph.zoomToCenter(30);  //  30边距

其实主要是利用graph.getGraphBounds()与graph.view.setTranslate()方法居中,然后来个while循环,如果内容宽高比container大就zoomOut()缩小,直到内容小于container的宽高为止。

文字链接:《mxGraph居中的方法

文章地址:http://www.qttc.net/201312391.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?