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

fix(bug): postil image zoom

master
wpxp123456 5 years ago
parent
37c56ac416
commit
76dbb5cc61
4 changed files with 68 additions and 58 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. 64
      src/controllers/imageCtrl.js
  2. 50
      src/controllers/postil.js
  3. 4
      src/controllers/zoom.js
  4. 8
      src/global/draw.js

64
src/controllers/imageCtrl.js
View File

@ -97,19 +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*Store.zoomRatio; let width = imgItemParam.width * Store.zoomRatio;
let height = imgItemParam.height*Store.zoomRatio; let height = imgItemParam.height * Store.zoomRatio;
let left = imgItemParam.left*Store.zoomRatio; let left = imgItemParam.left * Store.zoomRatio;
let top = imgItemParam.top*Store.zoomRatio; let top = imgItemParam.top * Store.zoomRatio;
let position = imgItemParam.position; let position = imgItemParam.position;
let borderWidth = imgItem.border.width; 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*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>
<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>`; </div>`;
}, },
getSliderHtml: function() { getSliderHtml: function() {
@ -354,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*Store.zoomRatio; let width = imgItemParam.width * Store.zoomRatio;
let height = imgItemParam.height*Store.zoomRatio; let height = imgItemParam.height * Store.zoomRatio;
let left = imgItemParam.left*Store.zoomRatio; let left = imgItemParam.left * Store.zoomRatio;
let top = imgItemParam.top*Store.zoomRatio; 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({
@ -370,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*Store.zoomRatio + "px " + item.default.height*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" "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*Store.zoomRatio, "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*Store.zoomRatio, "border-radius": item.border.radius * Store.zoomRatio,
"left": -item.border.width*Store.zoomRatio, "left": -item.border.width * Store.zoomRatio,
"right": -item.border.width*Store.zoomRatio, "right": -item.border.width * Store.zoomRatio,
"top": -item.border.width*Store.zoomRatio, "top": -item.border.width * Store.zoomRatio,
"bottom": -item.border.width*Store.zoomRatio, "bottom": -item.border.width * Store.zoomRatio,
}) })
_this.sliderHtmlShow(); _this.sliderHtmlShow();
@ -591,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*Store.zoomRatio; let width = imgItemParam.width * Store.zoomRatio;
let height = imgItemParam.height*Store.zoomRatio; let height = imgItemParam.height * Store.zoomRatio;
let left = imgItemParam.left*Store.zoomRatio; let left = imgItemParam.left * Store.zoomRatio;
let top = imgItemParam.top*Store.zoomRatio; let top = imgItemParam.top * Store.zoomRatio;
let position = imgItemParam.position; let position = imgItemParam.position;
$("#" + _this.currentImgId).show().css({ $("#" + _this.currentImgId).show().css({
@ -605,20 +605,20 @@ const imageCtrl = {
"position": position "position": position
}); });
$("#" + _this.currentImgId + " img").css({ $("#" + _this.currentImgId + " img").css({
"width": imgItem.default.width*Store.zoomRatio, "width": imgItem.default.width * Store.zoomRatio,
"height": imgItem.default.height*Store.zoomRatio, "height": imgItem.default.height * Store.zoomRatio,
"left": -imgItem.crop.offsetLeft*Store.zoomRatio, "left": -imgItem.crop.offsetLeft * Store.zoomRatio,
"top": -imgItem.crop.offsetTop*Store.zoomRatio "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*Store.zoomRatio, "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*Store.zoomRatio, "border-radius": imgItem.border.radius * Store.zoomRatio,
"left": -imgItem.border.width*Store.zoomRatio, "left": -imgItem.border.width * Store.zoomRatio,
"right": -imgItem.border.width*Store.zoomRatio, "right": -imgItem.border.width * Store.zoomRatio,
"top": -imgItem.border.width*Store.zoomRatio, "top": -imgItem.border.width * Store.zoomRatio,
"bottom": -imgItem.border.width*Store.zoomRatio, "bottom": -imgItem.border.width * Store.zoomRatio,
}) })
_this.currentImgId = null; _this.currentImgId = null;

50
src/controllers/postil.js
View File

@ -208,18 +208,21 @@ const luckysheetPostil = {
let toX = col; let toX = col;
let toY = row_pre; let toY = row_pre;
let fromX = toX + 18; let fromX = toX + 18 * Store.zoomRatio;
let fromY = toY - 18; let fromY = toY - 18 * Store.zoomRatio;
if(fromY < 0){ if(fromY < 0){
fromY = 2; fromY = 2;
} }
let width = _this.defaultWidth * Store.zoomRatio
let height = _this.defaultHeight * Store.zoomRatio
let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY); let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
let html = '<div id="luckysheet-postil-overshow">' + 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>' + '<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>'; '</div>';
$(html).appendTo($("#luckysheet-cell-main")); $(html).appendTo($("#luckysheet-cell-main"));
@ -349,10 +352,10 @@ const luckysheetPostil = {
let toX = col; let toX = col;
let toY = row_pre; let toY = row_pre;
let left = postil["left"] == null ? toX + 18 : postil["left"]; let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
let top = postil["top"] == null ? toY - 18 : postil["top"]; let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
let width = postil["width"] == null ? _this.defaultWidth : postil["width"]; let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
let height = postil["height"] == null ? _this.defaultHeight : postil["height"]; let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
let value = postil["value"] == null ? "" : postil["value"]; let value = postil["value"] == null ? "" : postil["value"];
if(top < 0){ if(top < 0){
@ -418,18 +421,21 @@ const luckysheetPostil = {
let toX = col; let toX = col;
let toY = row_pre; let toY = row_pre;
let fromX = toX + 18; let fromX = toX + 18 * Store.zoomRatio;
let fromY = toY - 18; let fromY = toY - 18 * Store.zoomRatio;
if(fromY < 0){ if(fromY < 0){
fromY = 2; fromY = 2;
} }
let width = _this.defaultWidth * Store.zoomRatio;
let height = _this.defaultHeight * Store.zoomRatio;
let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY); 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">' + 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>' + '<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">' +
'<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-t" data-type="t"></div>' +
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></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 toX = col;
let toY = row_pre; let toY = row_pre;
let left = postil["left"] == null ? toX + 18 : postil["left"]; let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
let top = postil["top"] == null ? toY - 18 : postil["top"]; let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
let width = postil["width"] == null ? _this.defaultWidth : postil["width"]; let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
let height = postil["height"] == null ? _this.defaultHeight : postil["height"]; let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
let value = postil["value"] == null ? "" : postil["value"]; let value = postil["value"] == null ? "" : postil["value"];
if(top < 0){ if(top < 0){
@ -609,10 +615,10 @@ const luckysheetPostil = {
let toX = col; let toX = col;
let toY = row_pre; let toY = row_pre;
let left = postil["left"] == null ? toX + 18 : postil["left"]; let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
let top = postil["top"] == null ? toY - 18 : postil["top"]; let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
let width = postil["width"] == null ? _this.defaultWidth : postil["width"]; let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
let height = postil["height"] == null ? _this.defaultHeight : postil["height"]; let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
let value = postil["value"] == null ? "" : postil["value"]; let value = postil["value"] == null ? "" : postil["value"];
if(top < 0){ if(top < 0){
@ -723,10 +729,10 @@ const luckysheetPostil = {
let toX = col; let toX = col;
let toY = row_pre; let toY = row_pre;
let left = postil["left"] == null ? toX + 18 : postil["left"]; let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
let top = postil["top"] == null ? toY - 18 : postil["top"]; let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
let width = postil["width"] == null ? _this.defaultWidth : postil["width"]; let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
let height = postil["height"] == null ? _this.defaultHeight : postil["height"]; let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
let value = postil["value"] == null ? "" : postil["value"]; let value = postil["value"] == null ? "" : postil["value"];
if(top < 0){ if(top < 0){

4
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 luckysheetPostil from './postil';
import imageCtrl from './imageCtrl'; import imageCtrl from './imageCtrl';
@ -31,6 +32,9 @@ export function zoomChange(ratio){
let currentSheet = sheetmanage.getSheetByIndex(); let currentSheet = sheetmanage.getSheetByIndex();
//批注
luckysheetPostil.buildAllPs(currentSheet.data);
//图片 //图片
imageCtrl.images = currentSheet.images; imageCtrl.images = currentSheet.images;
imageCtrl.allImagesShow(); imageCtrl.allImagesShow();

8
src/global/draw.js
View File

@ -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){ 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.beginPath();
luckysheetTableContent.moveTo( (end_c + offsetLeft - 1- ps_w), (start_r + offsetTop)); luckysheetTableContent.moveTo( (end_c + offsetLeft - 1- ps_w), (start_r + offsetTop));
luckysheetTableContent.lineTo( (end_c + offsetLeft - 1), (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) ; //文本垂直方向基准线 let verticalAlignPos_text = (pos_y + verticalCellHeight - space_height) ; //文本垂直方向基准线
luckysheetTableContent.textBaseline = "bottom"; luckysheetTableContent.textBaseline = "bottom";
let verticalAlignPos_checkbox = verticalAlignPos_text - 13; let verticalAlignPos_checkbox = verticalAlignPos_text - 13 * Store.zoomRatio;
if(verticalAlign == "0"){ //居中对齐 if(verticalAlign == "0"){ //居中对齐
verticalAlignPos_text = (pos_y + verticalCellHeight / 2); verticalAlignPos_text = (pos_y + verticalCellHeight / 2);
luckysheetTableContent.textBaseline = "middle"; luckysheetTableContent.textBaseline = "middle";
verticalAlignPos_checkbox = verticalAlignPos_text - 6; verticalAlignPos_checkbox = verticalAlignPos_text - 6 * Store.zoomRatio;
} }
else if(verticalAlign == "1"){ //上对齐 else if(verticalAlign == "1"){ //上对齐
verticalAlignPos_text = (pos_y + space_height); verticalAlignPos_text = (pos_y + space_height);
luckysheetTableContent.textBaseline = "top"; luckysheetTableContent.textBaseline = "top";
verticalAlignPos_checkbox = verticalAlignPos_text + 1; verticalAlignPos_checkbox = verticalAlignPos_text + 1 * Store.zoomRatio;
} }
horizonAlignPos = horizonAlignPos / Store.zoomRatio; horizonAlignPos = horizonAlignPos / Store.zoomRatio;

Write Preview
Loading…
Cancel
Save