From 76dbb5cc613c8290696e917c554aff934050b6a2 Mon Sep 17 00:00:00 2001 From: wpxp123456 <2677556700@qq.com> Date: Wed, 21 Oct 2020 14:54:26 +0800 Subject: [PATCH] fix(bug): postil image zoom --- src/controllers/imageCtrl.js | 64 ++++++++++++++++++------------------ src/controllers/postil.js | 50 +++++++++++++++------------- src/controllers/zoom.js | 4 +++ src/global/draw.js | 8 ++--- 4 files changed, 68 insertions(+), 58 deletions(-) diff --git a/src/controllers/imageCtrl.js b/src/controllers/imageCtrl.js index 3144047..eb31e58 100644 --- a/src/controllers/imageCtrl.js +++ b/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 `
- +
-
+
`; }, 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; diff --git a/src/controllers/postil.js b/src/controllers/postil.js index 4ae1daa..40bd3cc 100644 --- a/src/controllers/postil.js +++ b/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 = '
' + '' + - '
'+ value +'
' + + '
'+ value +'
' + '
'; $(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 = '
' + '' + - '
' + + '
' + '
' + '
' + '
' + @@ -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){ diff --git a/src/controllers/zoom.js b/src/controllers/zoom.js index 34d3569..711e395 100644 --- a/src/controllers/zoom.js +++ b/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(); diff --git a/src/global/draw.js b/src/global/draw.js index 2ad7da4..e62fb50 100644 --- a/src/global/draw.js +++ b/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;