elink-star
/
luckysheet
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix(image zoom): fix

master
wbfsa 5 years ago
parent
66a83dd135
commit
1337178a99
3 changed files with 43 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      src/controllers/imageCtrl.js
  2. 7
      src/controllers/zoom.js
  3. 2
      src/css/luckysheet-core.css

70
src/controllers/imageCtrl.js
View File

@ -97,17 +97,19 @@ const imageCtrl = {
let src = imgItem.src; let src = imgItem.src;
let imgItemParam = _this.getImgItemParam(imgItem); let imgItemParam = _this.getImgItemParam(imgItem);
let width = imgItemParam.width; let width = imgItemParam.width*Store.zoomRatio;
let height = imgItemParam.height; let height = imgItemParam.height*Store.zoomRatio;
let left = imgItemParam.left; let left = imgItemParam.left*Store.zoomRatio;
let top = imgItemParam.top; let top = imgItemParam.top*Store.zoomRatio;
let position = imgItemParam.position; 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;"> 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;"> <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}px;height:${imgItem.default.height}px;left:${-imgItem.crop.offsetLeft}px;top:${-imgItem.crop.offsetTop}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>
<div class="luckysheet-modal-dialog-border" style="border:${imgItem.border.width}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius}px;position:absolute;left:${-imgItem.border.width}px;right:${-imgItem.border.width}px;top:${-imgItem.border.width}px;bottom:${-imgItem.border.width}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>`; </div>`;
}, },
getSliderHtml: function() { getSliderHtml: function() {
@ -352,10 +354,10 @@ const imageCtrl = {
let item = _this.images[id]; let item = _this.images[id];
let imgItemParam = _this.getImgItemParam(item); let imgItemParam = _this.getImgItemParam(item);
let width = imgItemParam.width; let width = imgItemParam.width*Store.zoomRatio;
let height = imgItemParam.height; let height = imgItemParam.height*Store.zoomRatio;
let left = imgItemParam.left; let left = imgItemParam.left*Store.zoomRatio;
let top = imgItemParam.top; let top = imgItemParam.top*Store.zoomRatio;
let position = imgItemParam.position; let position = imgItemParam.position;
$("#luckysheet-modal-dialog-activeImage").show().css({ $("#luckysheet-modal-dialog-activeImage").show().css({
@ -368,19 +370,19 @@ const imageCtrl = {
$("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({ $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
"background-image": "url(" + item.src + ")", "background-image": "url(" + item.src + ")",
"background-size": item.default.width + "px " + item.default.height + "px", "background-size": item.default.width*Store.zoomRatio + "px " + item.default.height*Store.zoomRatio + "px",
"background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px" "background-position": -item.crop.offsetLeft*Store.zoomRatio + "px " + -item.crop.offsetTop*Store.zoomRatio + "px"
}) })
$("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css({ $("#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-style": item.border.style,
"border-color": item.border.color, "border-color": item.border.color,
"border-radius": item.border.radius, "border-radius": item.border.radius*Store.zoomRatio,
"left": -item.border.width, "left": -item.border.width*Store.zoomRatio,
"right": -item.border.width, "right": -item.border.width*Store.zoomRatio,
"top": -item.border.width, "top": -item.border.width*Store.zoomRatio,
"bottom": -item.border.width, "bottom": -item.border.width*Store.zoomRatio,
}) })
_this.sliderHtmlShow(); _this.sliderHtmlShow();
@ -589,10 +591,10 @@ const imageCtrl = {
let imgItem = _this.images[_this.currentImgId]; let imgItem = _this.images[_this.currentImgId];
let imgItemParam = _this.getImgItemParam(imgItem); let imgItemParam = _this.getImgItemParam(imgItem);
let width = imgItemParam.width; let width = imgItemParam.width*Store.zoomRatio;
let height = imgItemParam.height; let height = imgItemParam.height*Store.zoomRatio;
let left = imgItemParam.left; let left = imgItemParam.left*Store.zoomRatio;
let top = imgItemParam.top; let top = imgItemParam.top*Store.zoomRatio;
let position = imgItemParam.position; let position = imgItemParam.position;
$("#" + _this.currentImgId).show().css({ $("#" + _this.currentImgId).show().css({
@ -603,20 +605,20 @@ const imageCtrl = {
"position": position "position": position
}); });
$("#" + _this.currentImgId + " img").css({ $("#" + _this.currentImgId + " img").css({
"width": imgItem.default.width, "width": imgItem.default.width*Store.zoomRatio,
"height": imgItem.default.height, "height": imgItem.default.height*Store.zoomRatio,
"left": -imgItem.crop.offsetLeft, "left": -imgItem.crop.offsetLeft*Store.zoomRatio,
"top": -imgItem.crop.offsetTop "top": -imgItem.crop.offsetTop*Store.zoomRatio
}); });
$("#" + _this.currentImgId + " .luckysheet-modal-dialog-border").css({ $("#" + _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-style": imgItem.border.style,
"border-color": imgItem.border.color, "border-color": imgItem.border.color,
"border-radius": imgItem.border.radius, "border-radius": imgItem.border.radius*Store.zoomRatio,
"left": -imgItem.border.width, "left": -imgItem.border.width*Store.zoomRatio,
"right": -imgItem.border.width, "right": -imgItem.border.width*Store.zoomRatio,
"top": -imgItem.border.width, "top": -imgItem.border.width*Store.zoomRatio,
"bottom": -imgItem.border.width, "bottom": -imgItem.border.width*Store.zoomRatio,
}) })
_this.currentImgId = null; _this.currentImgId = null;
@ -955,7 +957,7 @@ const imageCtrl = {
imgItem.default.top = imgItemParam.top + changeSize - imgItem.crop.offsetTop; imgItem.default.top = imgItemParam.top + changeSize - imgItem.crop.offsetTop;
} }
else{ else{
if(imgItemParam.top + imgItemParam.height > row){ if(imgItemParam.top + imgItemParam.height >= row-2){
if(imgItemParam.top < row + changeSize){ if(imgItemParam.top < row + changeSize){
let scaleY = (imgItemParam.height + changeSize) / imgItemParam.height; let scaleY = (imgItemParam.height + changeSize) / imgItemParam.height;
imgItem.default.height = Math.round(imgItem.default.height * scaleY); imgItem.default.height = Math.round(imgItem.default.height * scaleY);
@ -1012,7 +1014,7 @@ const imageCtrl = {
imgItem.default.left = imgItemParam.left + changeSize - imgItem.crop.offsetLeft; imgItem.default.left = imgItemParam.left + changeSize - imgItem.crop.offsetLeft;
} }
else{ else{
if(imgItemParam.left + imgItemParam.width > col){ if(imgItemParam.left + imgItemParam.width >= col-2){
if(imgItemParam.left < col + changeSize){ if(imgItemParam.left < col + changeSize){
let scaleX = (imgItemParam.width + changeSize) / imgItemParam.width; let scaleX = (imgItemParam.width + changeSize) / imgItemParam.width;
imgItem.default.width = Math.round(imgItem.default.width * scaleX); imgItem.default.width = Math.round(imgItem.default.width * scaleX);

7
src/controllers/zoom.js
View File

@ -5,6 +5,7 @@ import sheetmanage from './sheetmanage';
import {changeSheetContainerSize} from './resize'; import {changeSheetContainerSize} from './resize';
import { jfrefreshgrid_rhcw } from '../global/refresh'; import { jfrefreshgrid_rhcw } from '../global/refresh';
import server from './server'; import server from './server';
import imageCtrl from './imageCtrl';
@ -29,6 +30,12 @@ export function zoomChange(ratio){
Store.zoomRatio = ratio; Store.zoomRatio = ratio;
let currentSheet = sheetmanage.getSheetByIndex(); let currentSheet = sheetmanage.getSheetByIndex();
//图片
imageCtrl.images = currentSheet.images;
imageCtrl.allImagesShow();
imageCtrl.init();
if(currentSheet.config==null){ if(currentSheet.config==null){
currentSheet.config = {}; currentSheet.config = {};
} }

2
src/css/luckysheet-core.css
View File

@ -4346,7 +4346,6 @@ fieldset[disabled] .btn-danger.focus {
} }
.luckysheet-modal-dialog-slider-list-title { .luckysheet-modal-dialog-slider-list-title {
width: 100%;
height: 20px; height: 20px;
line-height: 25px; line-height: 25px;
padding: 0px 5px; padding: 0px 5px;
@ -4480,7 +4479,6 @@ fieldset[disabled] .btn-danger.focus {
font-size: 13px; font-size: 13px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
width: 100%;
padding-left: 5px; padding-left: 5px;
} }

Write Preview
Loading…
Cancel
Save