fix(function update fix): fix bug

docs/guide/README.md

@@ -136,6 +136,7 @@ After `npm run build`, all files in the `dist` folder are copied to the project
 <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
 <link rel='stylesheet' href='./plugins/plugins.css' />
 <link rel='stylesheet' href='./css/luckysheet.css' />
+<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
 <script src="./plugins/js/plugin.js"></script>
 <script src="./luckysheet.umd.js"></script>
 ```

docs/guide/api.md

@@ -541,6 +541,54 @@ Use note:
 
 ------------
 
+### setRowHeight(rowInfo [,setting])
+
+(TODO)
+ 
+- **Parameter**：
+	
+	- {Object} [rowInfo]: Correspondence between number of rows and height
+	
+	- {PlainObject} [setting]: optional parameters
+		+ {Number} [order]: Worksheet subscript; the default value is the current worksheet subscript
+        + {Function} [success]: callback function for the end of the operation
+
+- **Explanation**：
+	
+	Set the height of the specified ~~row~~
+
+- **Usage**:
+
+   - Set the height of the first row to 50px and the height of the second row to 60px
+
+		`luckysheet.setRowHeight({0：50，1：60})`
+
+------------
+
+### setColumnWidth(columnInfo [,setting])
+
+(TODO)
+ 
+- **Parameter**：
+	
+	- {Number} [columnInfo]: Correspondence between the number of columns and the width
+	
+	- {PlainObject} [setting]: optional parameters
+		+ {Number} [order]: Worksheet subscript; the default value is the current worksheet subscript
+        + {Function} [success]: callback function for the end of the operation
+
+- **Explanation**：
+	
+	Set the width of the specified column
+
+- **Usage**:
+
+   - Set the width of the first column to 50px and the width of the second column to 60px
+
+		`luckysheet.setColumnWidth({0：50，1：60})`
+
+------------
+
 ## Selection operation
 
 ### getRange()
@@ -2013,6 +2061,32 @@ Use note:
 
 ------------
 
+### setSheetZoom(zoom [,setting])
+
+[todo]
+
+
+- **Parameter**：
+
+    - {Number} [zoom]: Worksheet zoom ratio
+
+	- {PlainObject} [setting]: optional parameters
+    	+ {Function} [success]: callback function for the end of the operation
+
+- **Explanation**：
+	
+	Set worksheet zoom ratio
+
+
+- **Usage**:
+
+	- Set the current worksheet zoom ratio to 0.5
+	```js
+	luckysheet.setSheetZoom(0.5)
+	```
+
+------------
+
 ### showGridLines([setting])
 
 - **Parameter**：
@@ -2295,6 +2369,63 @@ Use note:
 
 ------------
 
+## Data Verification
+
+### setDataVerification(option, [setting])
+
+[todo]
+
+- **Parameter**：
+	
+	- {Object} [option]: Configuration information for data verification
+    - {PlainObject} [setting]: optional parameters
+        + {Array | Object | String} [range]: The selection area for data verification, The format of the supported selection is `"A1:B2"`, `"sheetName!A1:B2"` or `{row:[0,1] ,column:[0,1]}`, can only be a single selection; the default is the current selection
+    	+ {Number} [order]: Worksheet subscript; the default value is the current worksheet subscript
+    	+ {Function} [success]: callback function for the end of the operation
+
+- **Explanation**：
+	
+	Specify the worksheet range to set the data verification function and set the parameters
+
+------------
+
+### deleteDataVerification([setting])
+
+[todo, to be confirmed whether it is reasonable]
+
+- **Parameter**：
+	
+    - {PlainObject} [setting]: optional parameters
+		+ {Array | Object | String} [range]: The selection area for data verification, The format of the supported selection is `"A1:B2"`, `"sheetName!A1:B2"` or `{row:[0,1] ,column:[0,1]}`, can only be a single selection; the default is the current selection
+    	+ {Number} [order]: Worksheet subscript; the default value is the current worksheet subscript
+    	+ {Function} [success]: callback function for the end of the operation
+
+- **Explanation**：
+	
+	Specify the worksheet range to delete the data verification function
+
+------------
+
+## Worksheet Protection
+
+
+### setProtection(option, [setting])
+
+[todo]
+
+- **Parameter**：
+	
+	- {Object} [option]: Configuration information for worksheet protection
+    - {PlainObject} [setting]: optional parameters
+    	+ {Number} [order]: Worksheet subscript; the default value is the current worksheet subscript
+    	+ {Function} [success]: callback function for the end of the operation
+
+- **Explanation**：
+	
+	Specify the worksheet to set the worksheet protection
+
+------------
+
 ## Public method
 
 ### transToCellData(data [,setting])<div id='transToCellData'></div>

docs/guide/config.md

@@ -743,6 +743,25 @@ The hook functions are uniformly configured under ʻoptions.hook`, and configura
 	- {String} [oldColor]: Before modification, the current worksheet color
 	- {String} [newColor]: After modification, the current worksheet color
 
+------------
+### sheetZoomBefore
+- Type: Function
+- Default: null
+- Usage: Before worksheet zoom
+- Parameter: 
+	- {Number} [i]: `index` of current worksheet
+	- {String} [zoom]: Current worksheet zoom ratio
+
+------------
+### sheetZoomAfter
+- Type: Function
+- Default: null
+- Usage: After worksheet zoom
+- Parameter: 
+	- {Number} [i]: `index` of current worksheet
+	- {String} [oldZoom]: Before modification, the current worksheet zoom ratio
+	- {String} [newZoom]: After modification, the current worksheet zoom ratio
+
 ------------
 
 ## Workbook

docs/zh/guide/README.md

@@ -137,6 +137,7 @@ npm run build
 <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
 <link rel='stylesheet' href='./plugins/plugins.css' />
 <link rel='stylesheet' href='./css/luckysheet.css' />
+<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
 <script src="./plugins/js/plugin.js"></script>
 <script src="./luckysheet.umd.js"></script>
 ```

docs/zh/guide/api.md

@@ -542,6 +542,54 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
 
 ------------
 
+### setRowHeight(rowInfo [,setting])
+
+(TODO)
+ 
+- **参数**：
+	
+	- {Object} [rowInfo]: 行数和高度对应关系
+	
+	- {PlainObject} [setting]: 可选参数
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+        + {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+	
+	设置指定行的高度
+
+- **示例**:
+
+   - 设置第一行高度为50px，第二行高度为60px
+
+		`luckysheet.setRowHeight({0：50，1：60})`
+
+------------
+
+### setColumnWidth(columnInfo [,setting])
+
+(TODO)
+ 
+- **参数**：
+	
+	- {Number} [columnInfo]: 列数和宽度对应关系
+	
+	- {PlainObject} [setting]: 可选参数
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+        + {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+	
+	设置指定列的宽度
+
+- **示例**:
+
+   - 设置第一列宽度为50px，第二列宽度为60px
+
+		`luckysheet.setColumnWidth({0：50，1：60})`
+
+------------
+
 ## 选区操作
 
 ### getRange()
@@ -1954,6 +2002,32 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
 
 ------------
 
+### setSheetZoom(zoom [,setting])
+
+[todo]
+
+
+- **参数**：
+
+    - {Number} [zoom]: 工作表缩放比例
+
+	- {PlainObject} [setting]: 可选参数
+        + {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+	
+	设置工作表缩放比例
+
+
+- **示例**:
+
+	- 设置当前工作表缩放比例为0.5
+	```js
+	luckysheet.setSheetZoom(0.5)
+	```
+
+------------
+
 ### showGridLines([setting])
 
 - **参数**：
@@ -2219,6 +2293,63 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
 
 ------------
 
+## 数据验证
+
+### setDataVerification(option, [setting])
+
+[todo]
+
+- **参数**：
+	
+	- {Object} [option]: 数据验证的配置信息
+    - {PlainObject} [setting]: 可选参数
+        + {Array | Object | String} [range]: 数据验证的选区范围,支持选区的格式为`"A1:B2"`、`"sheetName!A1:B2"`或者`{row:[0,1],column:[0,1]}`，只能为单个选区；默认为当前选区
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+		+ {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+	
+	指定工作表范围设置数据验证功能，并设置参数
+
+------------
+
+### deleteDataVerification([setting])
+
+[todo，待确认是否合理]
+
+- **参数**：
+	
+    - {PlainObject} [setting]: 可选参数
+		+ {Array | Object | String} [range]: 数据验证的选区范围,支持选区的格式为`"A1:B2"`、`"sheetName!A1:B2"`或者`{row:[0,1],column:[0,1]}`，只能为单个选区；默认为当前选区
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+		+ {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+	
+	指定工作表范围删除数据验证功能
+
+------------
+
+## 工作表保护
+
+
+### setProtection(option, [setting])
+
+[todo]
+
+- **参数**：
+	
+	- {Object} [option]: 工作表保护的配置信息
+    - {PlainObject} [setting]: 可选参数
+		+ {Number} [order]: 工作表下标；默认值为当前工作表下标
+		+ {Function} [success]: 操作结束的回调函数
+
+- **说明**：
+	
+	指定工作表设置工作表保护功能
+
+------------
+
 ## 公共方法
 
 ### transToCellData(data [,setting])<div id='transToCellData'></div>
@@ -2261,6 +2392,7 @@ Luckysheet针对常用的数据操作需求，开放了主要功能的API，开
 
 ------------
 
+
 ## 旧版API
 
 ::: warning

docs/zh/guide/config.md

@@ -744,6 +744,25 @@ Luckysheet开放了更细致的自定义配置选项，分别有
 	- {String} [oldColor]: 修改前当前sheet页颜色
 	- {String} [newColor]: 修改后当前sheet页颜色
 
+------------
+### sheetZoomBefore
+- 类型：Function
+- 默认值：null
+- 作用：sheet缩放前
+- 参数：
+	- {Number} [i]: sheet页的`index`
+	- {String} [zoom]: 当前sheet页缩放比例
+
+------------
+### sheetZoomAfter
+- 类型：Function
+- 默认值：null
+- 作用：sheet缩放后
+- 参数：
+	- {Number} [i]: sheet页的`index`
+	- {String} [oldZoom]: 修改前当前sheet页缩放比例
+	- {String} [newZoom]: 修改后当前sheet页缩放比例
+
 ------------
 
 ## 工作簿

src/controllers/imageCtrl.js

@@ -97,19 +97,19 @@ const imageCtrl = {
         let src = imgItem.src;
         let imgItemParam = _this.getImgItemParam(imgItem);
 
-        let width = imgItemParam.width*Store.zoomRatio;
-        let height = imgItemParam.height*Store.zoomRatio;
-        let left = imgItemParam.left*Store.zoomRatio;
-        let top = imgItemParam.top*Store.zoomRatio;
+        let width = imgItemParam.width * Store.zoomRatio;
+        let height = imgItemParam.height * Store.zoomRatio;
+        let left = imgItemParam.left * Store.zoomRatio;
+        let top = imgItemParam.top * Store.zoomRatio;
         let position = imgItemParam.position;
 
         let borderWidth = imgItem.border.width;
 
         return  `<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width:${width}px;height:${height}px;padding:0;position:${position};left:${left}px;top:${top}px;z-index:200;">
                     <div class="luckysheet-modal-dialog-content" style="width:100%;height:100%;overflow:hidden;position:relative;">
-                        <img src="${src}" style="position:absolute;width:${imgItem.default.width*Store.zoomRatio}px;height:${imgItem.default.height*Store.zoomRatio}px;left:${-imgItem.crop.offsetLeft*Store.zoomRatio}px;top:${-imgItem.crop.offsetTop*Store.zoomRatio}px;" />
+                        <img src="${src}" style="position:absolute;width:${imgItem.default.width * Store.zoomRatio}px;height:${imgItem.default.height * Store.zoomRatio}px;left:${-imgItem.crop.offsetLeft * Store.zoomRatio}px;top:${-imgItem.crop.offsetTop * Store.zoomRatio}px;" />
                     </div>
-                    <div class="luckysheet-modal-dialog-border" style="border:${borderWidth}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius*Store.zoomRatio}px;position:absolute;left:${-borderWidth}px;right:${-borderWidth}px;top:${-borderWidth}px;bottom:${-borderWidth}px;"></div>
+                    <div class="luckysheet-modal-dialog-border" style="border:${borderWidth}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius * Store.zoomRatio}px;position:absolute;left:${-borderWidth}px;right:${-borderWidth}px;top:${-borderWidth}px;bottom:${-borderWidth}px;"></div>
                 </div>`;
     },
     getSliderHtml: function() {
@@ -354,10 +354,10 @@ const imageCtrl = {
             let item = _this.images[id];
             let imgItemParam = _this.getImgItemParam(item);
 
-            let width = imgItemParam.width*Store.zoomRatio;
-            let height = imgItemParam.height*Store.zoomRatio;
-            let left = imgItemParam.left*Store.zoomRatio;
-            let top = imgItemParam.top*Store.zoomRatio;
+            let width = imgItemParam.width * Store.zoomRatio;
+            let height = imgItemParam.height * Store.zoomRatio;
+            let left = imgItemParam.left * Store.zoomRatio;
+            let top = imgItemParam.top * Store.zoomRatio;
             let position = imgItemParam.position;
         
             $("#luckysheet-modal-dialog-activeImage").show().css({
@@ -370,19 +370,19 @@ const imageCtrl = {
 
             $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
                 "background-image": "url(" + item.src + ")",
-                "background-size": item.default.width*Store.zoomRatio + "px " + item.default.height*Store.zoomRatio + "px",
-                "background-position": -item.crop.offsetLeft*Store.zoomRatio + "px " + -item.crop.offsetTop*Store.zoomRatio + "px"
+                "background-size": item.default.width * Store.zoomRatio + "px " + item.default.height * Store.zoomRatio + "px",
+                "background-position": -item.crop.offsetLeft * Store.zoomRatio + "px " + -item.crop.offsetTop * Store.zoomRatio + "px"
             })
 
             $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css({
-                "border-width": item.border.width*Store.zoomRatio,
+                "border-width": item.border.width * Store.zoomRatio,
                 "border-style": item.border.style,
                 "border-color": item.border.color,
-                "border-radius": item.border.radius*Store.zoomRatio,
-                "left": -item.border.width*Store.zoomRatio,
-                "right": -item.border.width*Store.zoomRatio,
-                "top": -item.border.width*Store.zoomRatio,
-                "bottom": -item.border.width*Store.zoomRatio,
+                "border-radius": item.border.radius * Store.zoomRatio,
+                "left": -item.border.width * Store.zoomRatio,
+                "right": -item.border.width * Store.zoomRatio,
+                "top": -item.border.width * Store.zoomRatio,
+                "bottom": -item.border.width * Store.zoomRatio,
             })
 
             _this.sliderHtmlShow();
@@ -591,10 +591,10 @@ const imageCtrl = {
         let imgItem = _this.images[_this.currentImgId];
         let imgItemParam = _this.getImgItemParam(imgItem);
 
-        let width = imgItemParam.width*Store.zoomRatio;
-        let height = imgItemParam.height*Store.zoomRatio;
-        let left = imgItemParam.left*Store.zoomRatio;
-        let top = imgItemParam.top*Store.zoomRatio;
+        let width = imgItemParam.width * Store.zoomRatio;
+        let height = imgItemParam.height * Store.zoomRatio;
+        let left = imgItemParam.left * Store.zoomRatio;
+        let top = imgItemParam.top * Store.zoomRatio;
         let position = imgItemParam.position;
 
         $("#" + _this.currentImgId).show().css({
@@ -605,20 +605,20 @@ const imageCtrl = {
             "position": position
         });
         $("#" + _this.currentImgId + " img").css({
-            "width": imgItem.default.width*Store.zoomRatio,
-            "height": imgItem.default.height*Store.zoomRatio,
-            "left": -imgItem.crop.offsetLeft*Store.zoomRatio,
-            "top": -imgItem.crop.offsetTop*Store.zoomRatio
+            "width": imgItem.default.width * Store.zoomRatio,
+            "height": imgItem.default.height * Store.zoomRatio,
+            "left": -imgItem.crop.offsetLeft * Store.zoomRatio,
+            "top": -imgItem.crop.offsetTop * Store.zoomRatio
         });
         $("#" + _this.currentImgId + " .luckysheet-modal-dialog-border").css({
-            "border-width": imgItem.border.width*Store.zoomRatio,
+            "border-width": imgItem.border.width * Store.zoomRatio,
             "border-style": imgItem.border.style,
             "border-color": imgItem.border.color,
-            "border-radius": imgItem.border.radius*Store.zoomRatio,
-            "left": -imgItem.border.width*Store.zoomRatio,
-            "right": -imgItem.border.width*Store.zoomRatio,
-            "top": -imgItem.border.width*Store.zoomRatio,
-            "bottom": -imgItem.border.width*Store.zoomRatio,
+            "border-radius": imgItem.border.radius * Store.zoomRatio,
+            "left": -imgItem.border.width * Store.zoomRatio,
+            "right": -imgItem.border.width * Store.zoomRatio,
+            "top": -imgItem.border.width * Store.zoomRatio,
+            "bottom": -imgItem.border.width * Store.zoomRatio,
         })
 
         _this.currentImgId = null;

src/controllers/postil.js

@@ -208,18 +208,21 @@ const luckysheetPostil = {
         let toX = col;
         let toY = row_pre;
 
-        let fromX = toX + 18;
-        let fromY = toY - 18;
+        let fromX = toX + 18 * Store.zoomRatio;
+        let fromY = toY - 18 * Store.zoomRatio;
 
         if(fromY < 0){
             fromY = 2;
         }
 
+        let width = _this.defaultWidth * Store.zoomRatio
+        let height = _this.defaultHeight * Store.zoomRatio
+
         let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
 
         let html =  '<div id="luckysheet-postil-overshow">' +
                         '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
-                        '<div style="width:132px;min-height:72px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ value +'</div>' +
+                        '<div style="width:'+ (width - 12) +'px;min-height:'+ (height - 12) +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ value +'</div>' +
                     '</div>';
 
         $(html).appendTo($("#luckysheet-cell-main"));
@@ -349,10 +352,10 @@ const luckysheetPostil = {
             let toX = col;
             let toY = row_pre;
 
-            let left = postil["left"] == null ? toX + 18 : postil["left"];
-            let top = postil["top"] == null ? toY - 18 : postil["top"];
-            let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-            let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+            let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+            let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+            let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+            let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
             let value = postil["value"] == null ? "" : postil["value"];
 
             if(top < 0){
@@ -418,18 +421,21 @@ const luckysheetPostil = {
         let toX = col;
         let toY = row_pre;
 
-        let fromX = toX + 18;
-        let fromY = toY - 18;
+        let fromX = toX + 18 * Store.zoomRatio;
+        let fromY = toY - 18 * Store.zoomRatio;
 
         if(fromY < 0){
             fromY = 2;
         }
 
+        let width = _this.defaultWidth * Store.zoomRatio;
+        let height = _this.defaultHeight * Store.zoomRatio;
+
         let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
 
         let html =  '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show luckysheet-postil-show-active">' +
                         '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
-                        '<div class="luckysheet-postil-show-main" style="width:144px;height:84px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;box-sizing:border-box;z-index:100;">' +
+                        '<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;box-sizing:border-box;z-index:100;">' +
                             '<div class="luckysheet-postil-dialog-move">' +
                                 '<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
                                 '<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
@@ -507,10 +513,10 @@ const luckysheetPostil = {
             let toX = col;
             let toY = row_pre;
 
-            let left = postil["left"] == null ? toX + 18 : postil["left"];
-            let top = postil["top"] == null ? toY - 18 : postil["top"];
-            let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-            let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+            let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+            let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+            let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+            let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
             let value = postil["value"] == null ? "" : postil["value"];
 
             if(top < 0){
@@ -609,10 +615,10 @@ const luckysheetPostil = {
             let toX = col;
             let toY = row_pre;
 
-            let left = postil["left"] == null ? toX + 18 : postil["left"];
-            let top = postil["top"] == null ? toY - 18 : postil["top"];
-            let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-            let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+            let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+            let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+            let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+            let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
             let value = postil["value"] == null ? "" : postil["value"];
 
             if(top < 0){
@@ -723,10 +729,10 @@ const luckysheetPostil = {
                         let toX = col;
                         let toY = row_pre;
 
-                        let left = postil["left"] == null ? toX + 18 : postil["left"];
-                        let top = postil["top"] == null ? toY - 18 : postil["top"];
-                        let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-                        let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+                        let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+                        let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+                        let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+                        let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
                         let value = postil["value"] == null ? "" : postil["value"];
 
                         if(top < 0){

src/controllers/zoom.js

@@ -5,6 +5,7 @@ import sheetmanage from './sheetmanage';
 import {changeSheetContainerSize} from './resize';
 import { jfrefreshgrid_rhcw } from '../global/refresh';
 import server from './server';
+import luckysheetPostil from './postil';
 import imageCtrl from './imageCtrl';
 
 
@@ -31,6 +32,9 @@ export function zoomChange(ratio){
 
         let currentSheet = sheetmanage.getSheetByIndex();
 
+        //批注
+        luckysheetPostil.buildAllPs(currentSheet.data);
+
         //图片
         imageCtrl.images = currentSheet.images;
         imageCtrl.allImagesShow();

src/global/draw.js

@@ -1112,7 +1112,7 @@ let nullCellRender = function(r, c, start_r, start_c, end_r, end_c,luckysheetTab
 
     //若单元格有批注
     if(Store.flowdata[r][c] != null && Store.flowdata[r][c].ps != null){
-        let ps_w = 5*Store.zoomRatio, ps_h = 5*Store.zoomRatio; 
+        let ps_w = 8*Store.zoomRatio, ps_h = 8*Store.zoomRatio; 
         luckysheetTableContent.beginPath();
         luckysheetTableContent.moveTo( (end_c + offsetLeft - 1- ps_w),  (start_r + offsetTop));
         luckysheetTableContent.lineTo( (end_c + offsetLeft - 1),  (start_r + offsetTop));
@@ -1338,17 +1338,17 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee
 
         let verticalAlignPos_text = (pos_y + verticalCellHeight - space_height) ; //文本垂直方向基准线
         luckysheetTableContent.textBaseline = "bottom";
-        let verticalAlignPos_checkbox = verticalAlignPos_text - 13;
+        let verticalAlignPos_checkbox = verticalAlignPos_text - 13 * Store.zoomRatio;
 
         if(verticalAlign == "0"){ //居中对齐 
             verticalAlignPos_text = (pos_y + verticalCellHeight / 2);
             luckysheetTableContent.textBaseline = "middle";
-            verticalAlignPos_checkbox = verticalAlignPos_text - 6;
+            verticalAlignPos_checkbox = verticalAlignPos_text - 6 * Store.zoomRatio;
         }
         else if(verticalAlign == "1"){ //上对齐
             verticalAlignPos_text = (pos_y + space_height);
             luckysheetTableContent.textBaseline = "top";
-            verticalAlignPos_checkbox = verticalAlignPos_text + 1;
+            verticalAlignPos_checkbox = verticalAlignPos_text + 1 * Store.zoomRatio;
         }
 
         horizonAlignPos = horizonAlignPos / Store.zoomRatio;

src/index.html

@@ -16,6 +16,9 @@
 
 	<!-- rollup luckysheet.js -->
 	<script src="./luckysheet.umd.js"></script>
+
+	<!-- demo feature, non-production use -->
+	<script src="./demoData/demoFeature.js"></script>
 </head>
 
 <body>
@@ -53,9 +56,9 @@
 					"url":"./assets/iconfont/Pacifico-Regular.ttf"
 					}
 				],
-				// data: 
-				// [sheetCell,sheetFormula,sheetConditionFormat,sheetSparkline,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart,sheetPicture,sheetDataVerification]
-				/*[{"name":"Sheet1","config":{"columnlen":{"0":241},"rowlen":{"0":81,"17":100}},"index":"1","status":"1","order":"0","luckysheet_select_save":[{"row":[0,0],"column":[4,4],"sheetIndex":1}],"zoomRatio":1,"showGridLines":"1","defaultColWidth":72,"defaultRowHeight":18,"celldata":[
+				data: 
+				[sheetCell,sheetFormula,sheetConditionFormat,sheetSparkline,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart,sheetPicture,sheetDataVerification]
+				/*[{"name":"Sheet1","config":{"columnlen":{"0":241},"rowlen":{"0":81}},"index":"1","status":"1","order":"0","luckysheet_select_save":[{"row":[0,0],"column":[4,4],"sheetIndex":1}],"zoomRatio":1,"showGridLines":"1","defaultColWidth":72,"defaultRowHeight":18,"celldata":[
 					{"r":0,"c":0,
 						"v":{
 							"ct":{
@@ -93,7 +96,7 @@
 							"qp":1,
 						}
 					},
-					{"r":17,"c":2,"v":{"v":"Luckysheet is good project, this is true","ct":{"fa":"General","t":"g"},"bg":null,"bl":0,"it":0,"ff":0,"fs":"11","fc":"rgb(51, 51, 51)","ht":1,"vt":1,tb:2,"m":"Luckysheet"}}
+					{"r":17,"c":2,"v":{"v":"Luckysheet","ct":{"fa":"General","t":"g"},"bg":null,"bl":0,"it":0,"ff":0,"fs":"11","fc":"rgb(51, 51, 51)","ht":1,"vt":1,"m":"Luckysheet"}}
 				],"calcChain":[]}]*/
 
 				/*