diff --git a/src/controllers/imageCtrl.js b/src/controllers/imageCtrl.js index 2749b6b05..314404794 100644 --- a/src/controllers/imageCtrl.js +++ b/src/controllers/imageCtrl.js @@ -97,17 +97,19 @@ const imageCtrl = { let src = imgItem.src; let imgItemParam = _this.getImgItemParam(imgItem); - let width = imgItemParam.width; - let height = imgItemParam.height; - let left = imgItemParam.left; - let top = imgItemParam.top; + 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() { @@ -352,10 +354,10 @@ const imageCtrl = { let item = _this.images[id]; let imgItemParam = _this.getImgItemParam(item); - let width = imgItemParam.width; - let height = imgItemParam.height; - let left = imgItemParam.left; - let top = imgItemParam.top; + 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({ @@ -368,19 +370,19 @@ const imageCtrl = { $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({ "background-image": "url(" + item.src + ")", - "background-size": item.default.width + "px " + item.default.height + "px", - "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "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, + "border-width": item.border.width*Store.zoomRatio, "border-style": item.border.style, "border-color": item.border.color, - "border-radius": item.border.radius, - "left": -item.border.width, - "right": -item.border.width, - "top": -item.border.width, - "bottom": -item.border.width, + "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(); @@ -589,10 +591,10 @@ const imageCtrl = { let imgItem = _this.images[_this.currentImgId]; let imgItemParam = _this.getImgItemParam(imgItem); - let width = imgItemParam.width; - let height = imgItemParam.height; - let left = imgItemParam.left; - let top = imgItemParam.top; + 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({ @@ -603,20 +605,20 @@ const imageCtrl = { "position": position }); $("#" + _this.currentImgId + " img").css({ - "width": imgItem.default.width, - "height": imgItem.default.height, - "left": -imgItem.crop.offsetLeft, - "top": -imgItem.crop.offsetTop + "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, + "border-width": imgItem.border.width*Store.zoomRatio, "border-style": imgItem.border.style, "border-color": imgItem.border.color, - "border-radius": imgItem.border.radius, - "left": -imgItem.border.width, - "right": -imgItem.border.width, - "top": -imgItem.border.width, - "bottom": -imgItem.border.width, + "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; @@ -955,7 +957,7 @@ const imageCtrl = { imgItem.default.top = imgItemParam.top + changeSize - imgItem.crop.offsetTop; } else{ - if(imgItemParam.top + imgItemParam.height > row){ + if(imgItemParam.top + imgItemParam.height >= row-2){ if(imgItemParam.top < row + changeSize){ let scaleY = (imgItemParam.height + changeSize) / imgItemParam.height; imgItem.default.height = Math.round(imgItem.default.height * scaleY); @@ -1012,7 +1014,7 @@ const imageCtrl = { imgItem.default.left = imgItemParam.left + changeSize - imgItem.crop.offsetLeft; } else{ - if(imgItemParam.left + imgItemParam.width > col){ + if(imgItemParam.left + imgItemParam.width >= col-2){ if(imgItemParam.left < col + changeSize){ let scaleX = (imgItemParam.width + changeSize) / imgItemParam.width; imgItem.default.width = Math.round(imgItem.default.width * scaleX); diff --git a/src/controllers/zoom.js b/src/controllers/zoom.js index df50d37c5..34d356954 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 imageCtrl from './imageCtrl'; @@ -29,6 +30,12 @@ export function zoomChange(ratio){ Store.zoomRatio = ratio; let currentSheet = sheetmanage.getSheetByIndex(); + + //图片 + imageCtrl.images = currentSheet.images; + imageCtrl.allImagesShow(); + imageCtrl.init(); + if(currentSheet.config==null){ currentSheet.config = {}; } diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css index 8cfe1e2dc..1662096e4 100644 --- a/src/css/luckysheet-core.css +++ b/src/css/luckysheet-core.css @@ -4346,7 +4346,6 @@ fieldset[disabled] .btn-danger.focus { } .luckysheet-modal-dialog-slider-list-title { - width: 100%; height: 20px; line-height: 25px; padding: 0px 5px; @@ -4480,7 +4479,6 @@ fieldset[disabled] .btn-danger.focus { font-size: 13px; height: 20px; line-height: 20px; - width: 100%; padding-left: 5px; }