矢量图标和渲染元素图标在运行状态graphView缩放时如何保持矢量图标的原始字体大小

如下图所示，图纸中有用到矢量图标ht.Text，也有用到渲染元素图标ht.ui.textArea-ui、ht.ui.table-ui 在编辑状态下随图纸的缩放，需要显示的文字都能保持一致缩放状态，对于矢量图标是自动缩放的，对于渲染元素图标，需要设置gv.layoutHTML()的第3个参数为false即可，如果设置为true那么文字大小就会始终保持设定的字体大小，不论图标控件尺寸如何缩放。

所以通过自定义的runningMode()方法（具体实现在iotosCommon.js中）判断编辑当前状态：渲染元素的文字自动缩放；运行状态下渲染元素图标的文字始终保持原始设定大小！

控制编辑、运行时态文字大小是自动缩放还是始终显示真实大小非常重要，特别是对于在设置布局、尺寸动态变化时，否则会出现如下情况：

 

会发现运行状态下，文字大小保持原始值是非常有必要的，否则字体大小不同区域、不同组件大小不一，体验非常不友好。

对于渲染元素图标，只需要代码中固定如下设置即可：

JavaScript …… var obj = cache.obj = init() obj.layoutHTML = function() {     gv.layoutHTML(data, obj, runningMode(gv)); } ……

现在重点是内置的矢量图标，比如ht.Text，如何在graphView变大、缩小时，文字也能控制运行状态下字体大小保持原先设置的值呢？有两个方法：

1. 图纸属性中把“适配内容”勾选去掉

在有吸附节点进行布局的情况下，是没有必要勾选适配内容的，勾选了会导致缩放过程中矢量图标的文字会被缩放，不勾选适配内容，交给吸附节点去布局就好！

同时注意，反序列化后onPostDeserialize中对gv.fitContent(false,0,1)的调用也去掉！

注意：只要有勾选“适配内容”或调用了gv.fitContent()，动态改变浏览器窗口大小尺寸时，会被自动缩放导致出现不断缩小的现象，固定浏览器窗口大小后刷新页面才能恢复正常！

运行状态下不同尺寸查看效果：

1. 调用gv.zoomReset()重置缩放比例

graphView的zoomReset()方法：https://www.hightopo.com/guide/doc/ht.graph.GraphView.html#zoomReset，可以在尺寸缩放时，恢复缩放比例让矢量图标显示实际文字大小！

如下代码所示，监听浏览器窗口大小实时变化，在事件中调用gv.fitContent()才能做到原本勾选了适配内容的图纸页面能够内容区域自适应缩放大小以全部显示；调用gv.zoomReset()则会恢复缩放！

图纸被嵌套+吸附节点布局，反序列化后onPostDeserialize()后的代码模板：

JavaScript initGVLoadedRunning(gv); gv.zoomReset();  //或 gv.reset();

不论是否要调用fitContent、zoomReset，一定要有监听此事件并调用gv.iv()，否则即便是吸附节点布的自动相对布局，也跟fitContent的适配内容缩放布局一样，都不会随着窗口大小尺寸变化而自动触发：

JavaScript this.g2dResizeListener = (e) => {     /*对于勾选了适配内容的，才会在浏览器窗口尺寸动态改变时调用适配内容，通常是矢量组态页面     如果没有勾选适配内容，通常是有做吸附节点布局的管理后台类的页面，这时不要适配内容，否则造成会不停缩小的异常现象！*/     g2d.dm().a('fitContent') && g2d.fitContent(false, 0);        g2d.iv(); }; window.addEventListener('resize', this.g2dResizeListener);

注意，在嵌套graphView中加载图纸，且图纸中用的是吸附节点布局，没有勾选“适配内容”，这种情况下，直接运行该图纸（在IOTOS应用平台框架内），显示的矢量图标字体大小也是正常大小，不会被缩放，即使随着浏览器窗口的动态调整也是如此，打印gv的缩放比例显示1。

但是作为嵌套运行（上一层通常是有布局的），此时运行显示后图纸缩放比例可能就不是1了，通常会被缩小，所以对于嵌套图纸，需要手动在反序列化后加上这句恢复缩放默认初始状态（缩放比例1）：

上述代码简化成如下固定代码，在嵌套的graphView组件反序列化后加上这句：

图纸被嵌套+适配内容，反序列化后onPostDeserialize()后的代码模板

（注意，新版升级后，嵌套图纸的按下事件是否停止冒泡，已经不交给initGVLoadedRunning的传参来控制了，默认自动识别根据图元的可选中属性来确定是否停止冒泡，不可选中就继续冒泡，可选中就停止冒泡，这样也兼容了滑动组件的事件响应不会被截获。升级后，文档中部分截图未作更新，请留意。）

JavaScript initGVLoadedRunning(gv,false); gv.fitContent(false, 0, 1); window.addEventListener('resize', e => {     dm.a('fitContent') && gv.fitContent(false, 0);     gv.iv(); });

如下图所示，这样才能保证浏览器窗口尺寸动态改变时，“适配内容”也能起作用达到适配的效果：

 

缩放平移整个拓扑以展示所有的图元；加载图纸后，布局适应的过程动画怎么去掉，禁用加载后自适应的动画