Skip to content
This repository has been archived by the owner on Mar 28, 2024. It is now read-only.

Commit

Permalink
fix(old chrome dont surport actualboundingboxascent): fix it and make…
Browse files Browse the repository at this point in the history 
… it beautiful
  • Loading branch information
@tubiaoge
tubiaoge committed Aug 6, 2020
1 parent 9c9c1d5 commit 5c503d8
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 46 deletions.
6 changes: 3 additions & 3 deletions src/controllers/menuButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3839,12 +3839,12 @@ const menuButton = {
}

if($("#luckysheetTextSizeTest").length == 0){
$('<span id="luckysheetTextSizeTest" style="float:left;white-space:nowrap;visibility:hidden">' + text + '</span>').appendTo($('body'));
$('<span id="luckysheetTextSizeTest" style="float:left;white-space:nowrap;visibility:hidden;margin:0;padding:0;">' + text + '</span>').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];

Expand Down
60 changes: 22 additions & 38 deletions src/global/draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -237,7 +237,7 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of


// console.trace();
clearTimeout(measureTextCacheTimeOut);
clearTimeout(Store.measureTextCacheTimeOut);

//参数未定义处理
if (scrollWidth == null) {
Expand Down Expand Up @@ -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;

//表格渲染区域 非空单元格行列 起止坐标
Expand Down Expand Up @@ -860,8 +860,8 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of
);
}

measureTextCacheTimeOut = setTimeout(() => {
measureTextCache = {};
Store.measureTextCacheTimeOut = setTimeout(() => {
Store.measureTextCache = {};
}, 2000);
}

Expand Down Expand Up @@ -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");
Expand All @@ -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);
//条件格式
Expand Down Expand Up @@ -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];

Expand All @@ -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();
Expand All @@ -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;
Expand Down Expand Up @@ -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");
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
42 changes: 37 additions & 5 deletions src/global/getRowlen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

//计算范围行高
Expand Down Expand Up @@ -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; //单元格宽度
Expand All @@ -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;
Expand Down Expand Up @@ -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){
Expand All @@ -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
}
3 changes: 3 additions & 0 deletions src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,9 @@ const Store = {
chart_selection: {},
currentChart: '',
scrollRefreshSwitch:true,

measureTextCache:{},
measureTextCacheTimeOut:null,
}

export default Store;

0 comments on commit 5c503d8

Please sign in to comment.