diff --git a/src/controllers/menuButton.js b/src/controllers/menuButton.js index 1ff659f..32cbe82 100644 --- a/src/controllers/menuButton.js +++ b/src/controllers/menuButton.js @@ -3839,12 +3839,12 @@ const menuButton = { } if($("#luckysheetTextSizeTest").length == 0){ - $('').appendTo($('body')); + $('').appendTo($('body')); } let o = $("#luckysheetTextSizeTest").text(text).css({'font': f}), - w = o.width(), - h = o.height(); + w = o.innerWidth(), + h = o.innerHeight(); _this.getTextHeightCache[f] = [w, h]; diff --git a/src/global/draw.js b/src/global/draw.js index 9eb5c21..3cee455 100644 --- a/src/global/draw.js +++ b/src/global/draw.js @@ -8,7 +8,7 @@ import { luckysheet_searcharray } from '../controllers/sheetSearch'; import { dynamicArrayCompute } from './dynamicArray'; import browser from './browser'; import { isRealNull } from './validate'; -import { getCellTextSplitArr } from './getRowlen'; +import { getCellTextSplitArr,getMeasureText } from './getRowlen'; import { getcellvalue } from './getdata'; import { getBorderInfoCompute } from './border'; import { getSheetIndex } from '../methods/get'; @@ -237,7 +237,7 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of // console.trace(); - clearTimeout(measureTextCacheTimeOut); + clearTimeout(Store.measureTextCacheTimeOut); //参数未定义处理 if (scrollWidth == null) { @@ -371,7 +371,7 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of (fill_row_ed - scrollHeight) * Store.devicePixelRatio ); luckysheetTableContent.font = luckysheetdefaultFont(); - luckysheetTableContent.textBaseline = "top"; + // luckysheetTableContent.textBaseline = "top"; luckysheetTableContent.fillStyle = luckysheetdefaultstyle.fillStyle; //表格渲染区域 非空单元格行列 起止坐标 @@ -860,8 +860,8 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of ); } - measureTextCacheTimeOut = setTimeout(() => { - measureTextCache = {}; + Store.measureTextCacheTimeOut = setTimeout(() => { + Store.measureTextCache = {}; }, 2000); } @@ -1044,7 +1044,7 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee let fontset = luckysheetfontformat(cell); luckysheetTableContent.font = fontset; - luckysheetTableContent.textBaseline = 'top'; + // luckysheetTableContent.textBaseline = 'top'; //水平对齐 let horizonAlign = menuButton.checkstatus(Store.flowdata, r, c, "ht"); @@ -1055,7 +1055,7 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee let measureText = getMeasureText(value, luckysheetTableContent); //luckysheetTableContent.measureText(value); let textMetrics = measureText.width; - let oneLineTextHeight = measureText.actualBoundingBoxDescent - measureText.actualBoundingBoxAscent; + let oneLineTextHeight = measureText.actualBoundingBoxDescent + measureText.actualBoundingBoxAscent; //交替颜色 let checksAF = alternateformat.checksAF(r, c, af_compute); //条件格式 @@ -1371,11 +1371,11 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee if(cell.tb == '2'){ //自动换行 - luckysheetTableContent.textBaseline = 'top'; //textBaseline以top计算 + // luckysheetTableContent.textBaseline = 'top'; //textBaseline以top计算 let strArr = [];//文本截断数组 strArr = getCellTextSplitArr(value.toString(), strArr, cellWidth - space_width * 2, luckysheetTableContent); - + let word_space_height = oneLineTextHeight/3; for(let i = 0; i < strArr.length; i++){ let strV = strArr[i]; @@ -1395,28 +1395,31 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee } //垂直对齐计算 + let clLine = 0; if(verticalAlign == "0"){ - verticalAlignPos = (pos_y + cellHeight / 2) * Store.devicePixelRatio - (strHeight / 2) * strArr.length; + verticalAlignPos = (pos_y + cellHeight / 2) * Store.devicePixelRatio - (strHeight+word_space_height) * (strArr.length-1)/2; } else if(verticalAlign == "1"){ verticalAlignPos = (pos_y + space_height) * Store.devicePixelRatio; + clLine = strHeight / 2; } else{ - verticalAlignPos = (pos_y + cellHeight - space_height) * Store.devicePixelRatio - strHeight * strArr.length; + verticalAlignPos = (pos_y + cellHeight - space_height) * Store.devicePixelRatio - (strHeight+word_space_height) * (strArr.length-1); + clLine = -strHeight / 2; } - luckysheetTableContent.fillText(strV, horizonAlignPos, (verticalAlignPos + i * strHeight)); + luckysheetTableContent.fillText(strV, horizonAlignPos, (verticalAlignPos + i * (strHeight+word_space_height))); if(cl == "1" && !isRealNull(strV)){ luckysheetTableContent.beginPath(); luckysheetTableContent.strokeStyle = "#000"; - luckysheetTableContent.moveTo( - horizonAlignPos, - (verticalAlignPos + i * strHeight) + strHeight / 2 + + luckysheetTableContent.moveTo(horizonAlignPos, + (verticalAlignPos + i * (strHeight+word_space_height)) +clLine ); luckysheetTableContent.lineTo( horizonAlignPos + strWidth, - (verticalAlignPos + i * strHeight) + strHeight / 2 + (verticalAlignPos + i * (strHeight+word_space_height)) +clLine ); luckysheetTableContent.stroke(); luckysheetTableContent.closePath(); @@ -1425,7 +1428,7 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee } else if(cell.tr != null && cell.tr != '0'){ //旋转 - luckysheetTableContent.textBaseline = 'top'; //textBaseline以top计算 + // luckysheetTableContent.textBaseline = 'top'; //textBaseline以top计算 //单元格旋转属性 let tr = cell.tr; @@ -1744,7 +1747,7 @@ let cellOverflowRender = function(r, c, stc, edc,luckysheetTableContent,scrollHe let fontset = luckysheetfontformat(cell); luckysheetTableContent.font = fontset; - luckysheetTableContent.textBaseline = 'top'; + // luckysheetTableContent.textBaseline = 'top'; //溢出单元格 值 let value = getcellvalue(r, c, null, "m"); @@ -1756,7 +1759,7 @@ let cellOverflowRender = function(r, c, stc, edc,luckysheetTableContent,scrollHe let measureText = getMeasureText(value, luckysheetTableContent); //luckysheetTableContent.measureText(value); let textMetrics = measureText.width; - let oneLineTextHeight = measureText.actualBoundingBoxDescent - measureText.actualBoundingBoxAscent; + let oneLineTextHeight = measureText.actualBoundingBoxDescent + measureText.actualBoundingBoxAscent; let pos_x = start_c + offsetLeft; let pos_y = start_r + offsetTop + 1; @@ -2053,25 +2056,6 @@ function cellOverflow_colIn(map, r, c, col_st, col_ed){ } } -//获取有值单元格文本大小 -let measureTextCache = {}, measureTextCacheTimeOut = null; -function getMeasureText(value, ctx){ - let mtc = measureTextCache[value + "_" + ctx.font]; - - if(mtc != null){ - return mtc; - } - else{ - let measureText = ctx.measureText(value), cache = {}; - cache.width = measureText.width; - cache.actualBoundingBoxDescent = measureText.actualBoundingBoxDescent; - cache.actualBoundingBoxAscent = measureText.actualBoundingBoxAscent; - measureTextCache[value + "_" + ctx.font] = cache; - - return cache; - } -} - export { luckysheetDrawgrid, luckysheetDrawgridRowTitle, diff --git a/src/global/getRowlen.js b/src/global/getRowlen.js index 473f5f8..3499faa 100644 --- a/src/global/getRowlen.js +++ b/src/global/getRowlen.js @@ -2,6 +2,7 @@ import { luckysheetfontformat } from '../utils/util'; import menuButton from '../controllers/menuButton'; import { getcellvalue } from './getdata'; import { colLocationByIndex } from './location'; +import { hasChinaword } from './validate'; import Store from '../store'; //计算范围行高 @@ -38,13 +39,13 @@ function rowlenByRange(d, r1, r2, cfg) { canvas.font = fontset; let value = getcellvalue(r, c, d).toString(); //单元格文本 - let measureText = canvas.measureText(value); + let measureText = getMeasureText(value, canvas); let textMetrics = measureText.width; //文本宽度 - let oneLineTextHeight = measureText.actualBoundingBoxDescent - measureText.actualBoundingBoxAscent; + let oneLineTextHeight = measureText.actualBoundingBoxDescent + measureText.actualBoundingBoxAscent; let computeRowlen; //计算行高 - + let word_space_height = oneLineTextHeight/3; if(cell.tb == "2"){ //自动换行 let cellWidth = colLocationByIndex(c)[1] - colLocationByIndex(c)[0] - 4; //单元格宽度 @@ -53,7 +54,7 @@ function rowlenByRange(d, r1, r2, cfg) { let strArr = []; //文本截断数组 strArr = getCellTextSplitArr(value, strArr, cellWidth, canvas); - computeRowlen = oneLineTextHeight * strArr.length + 4; + computeRowlen = (oneLineTextHeight+word_space_height) * strArr.length + 4; } else{ computeRowlen = oneLineTextHeight + 4; @@ -132,7 +133,7 @@ function computeRowlenArr(rowHeight, cfg) { function getCellTextSplitArr(strValue, strArr, cellWidth, canvas){ for(let strI = 1; strI <= strValue.length; strI++){ let strV = strValue.substring(0, strI); - let strtextMetrics = canvas.measureText(strV).width; + let strtextMetrics = getMeasureText(strV, canvas).width; if(strtextMetrics > cellWidth){ if(strI - 1 <= 0){ @@ -151,8 +152,39 @@ function getCellTextSplitArr(strValue, strArr, cellWidth, canvas){ return strArr; } +//获取有值单元格文本大小 +// let measureTextCache = {}, measureTextCacheTimeOut = null; +function getMeasureText(value, ctx){ + let mtc = Store.measureTextCache[value + "_" + ctx.font]; + + if(mtc != null){ + return mtc; + } + else{ + let measureText = ctx.measureText(value), cache = {}; + cache.width = measureText.width; + cache.actualBoundingBoxDescent = NaN; + cache.actualBoundingBoxAscent = measureText.actualBoundingBoxAscent; + if(cache.actualBoundingBoxDescent==null || cache.actualBoundingBoxAscent==null || isNaN(cache.actualBoundingBoxDescent) || isNaN(cache.actualBoundingBoxAscent)){ + let commonWord = "M" + if(hasChinaword(value)){ + commonWord = "田"; + } + let oneLineTextHeight = menuButton.getTextSize(commonWord, ctx.font)[1]*0.8; + cache.actualBoundingBoxDescent = oneLineTextHeight/2; + cache.actualBoundingBoxAscent = oneLineTextHeight/2; + + //console.log(value, oneLineTextHeight, measureText.actualBoundingBoxDescent+measureText.actualBoundingBoxAscent,ctx.font); + } + Store.measureTextCache[value + "_" + ctx.font] = cache; + + return cache; + } +} + export { rowlenByRange, computeRowlenArr, getCellTextSplitArr, + getMeasureText } \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 8ae7bb9..4132c79 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -113,6 +113,9 @@ const Store = { chart_selection: {}, currentChart: '', scrollRefreshSwitch:true, + + measureTextCache:{}, + measureTextCacheTimeOut:null, } export default Store; \ No newline at end of file