js画图开发库--mxgraph--[control-缩放(放大、缩小).html]
js画图开发库--mxgraph--[control-缩放(放大、缩小).html]
?
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>缩放</title><!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 --><script type="text/javascript">mxBasePath = '../src';</script><!-- 引入支持库文件 --><script type="text/javascript" src="../src/js/mxClient.js"></script><!-- 示例代码 --><script type="text/javascript">// 程序在此方法中启动function main(container) {// 检查浏览器支持if (!mxClient.isBrowserSupported()) {mxUtils.error('Browser is not supported!', 200, false);} else {//去锯齿效果mxRectangleShape.prototype.crisp = true;// 在容器中创建图形var graph = new mxGraph(container);graph.setPanning(true);// 删除图标var deleteImage = new mxImage('editors/images/overlays/forbidden.png', 16, 16);// 重写以添加一个删除按钮 mxCellRendererCreateControl = mxCellRenderer.prototype.createControl;mxCellRenderer.prototype.createControl = function(state) {mxCellRendererCreateControl.apply(this, arguments);var graph = state.view.graph;if (graph.getModel().isVertex(state.cell)){if (state.deleteControl == null){var b = new mxRectangle(0, 0, deleteImage.width, deleteImage.height);state.deleteControl = new mxImageShape(b, deleteImage.src);state.deleteControl.dialect = graph.dialect;state.deleteControl.preserveImageAspect = false;this.initControl(state, state.deleteControl, false, function (evt){if (graph.isEnabled()){graph.removeCells([state.cell]);mxEvent.consume(evt);}});}}else if (state.deleteControl != null){state.deleteControl.destroy();state.deleteControl = null;}};// 辅助函数来计算元素边界var getDeleteControlBounds = function(state){if (state.deleteControl != null){var oldScale = state.deleteControl.scale;var w = state.deleteControl.bounds.width / oldScale;var h = state.deleteControl.bounds.height / oldScale;var s = state.view.scale;return (state.view.graph.getModel().isEdge(state.cell)) ? new mxRectangle(state.x + state.width / 2 - w / 2 * s,state.y + state.height / 2 - h / 2 * s, w * s, h * s): new mxRectangle(state.x + state.width - w * s,state.y, w * s, h * s);}return null;};// 重写以更新大小状态mxCellRendererRedrawControl = mxCellRenderer.prototype.redrawControl;mxCellRenderer.prototype.redrawControl = function(state){mxCellRendererRedrawControl.apply(this, arguments);if (state.deleteControl != null){var bounds = getDeleteControlBounds(state);var s = state.view.scale;if (state.deleteControl.scale != s || !state.deleteControl.bounds.equals(bounds)){state.deleteControl.bounds = bounds;state.deleteControl.scale = s;state.deleteControl.redraw();}}};// 如果状态被破坏，重写中删除控制mxCellRendererDestroy = mxCellRenderer.prototype.destroy;mxCellRenderer.prototype.destroy = function(state) {mxCellRendererDestroy.apply(this, arguments);if (state.deleteControl != null){state.deleteControl.destroy();state.deleteControl = null;}};//设置容器自动调整大小//graph.setResizeContainer(true);// 拉伸选项new mxRubberband(graph);// 在对象中创建默认组件 var parent = graph.getDefaultParent();//开启模型的更新事务graph.getModel().beginUpdate();try{var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);var e1 = graph.insertEdge(parent, null, '', v1, v2);}finally {// 更新事务结束 graph.getModel().endUpdate();}//是否已图形的中心进行放大，否则以元素为中心放大graph.centerZoom = false;//添加放大和缩小按钮document.body.appendChild(mxUtils.button('Zoom In（放大）', function() {graph.zoomIn();}));document.body.appendChild(mxUtils.button('Zoom Out（缩小）', function() {graph.zoomOut();}));}};</script></head><!-- 页面载入时启动程序 --><body onload="main(document.getElementById('graphContainer'))"><!-- 创建带网格壁纸和曲线的一个容器 --><div id="graphContainer"style="overflow:hidden;width:621px;height:441px;background:url('editors/images/grid.gif');cursor:default;"></div></body></html>?
?
?