Skip to content

Commit

Permalink
fix(render): rect blurring (#1511)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DR-Univer
DR-Univer committed Mar 7, 2024
1 parent c8c7bf3 commit 97ed99a
Show file tree
Hide file tree
Showing 9 changed files with 141 additions and 50 deletions.
8 changes: 4 additions & 4 deletions packages/engine-render/src/basics/draw.ts
View file
Expand Up @@ -84,8 +84,8 @@ export function drawLineByBorderType(ctx: UniverRenderingContext, type: BORDER_T

// ctx.clearRect(drawStartX - 1, drawStartY - 1, drawEndX - drawStartX + 2, drawEndY - drawStartY + 2);
ctx.beginPath();
ctx.moveTo(drawStartX, drawStartY);
ctx.lineTo(drawEndX, drawEndY);
ctx.moveToByPrecision(drawStartX, drawStartY);
ctx.lineToByPrecision(drawEndX, drawEndY);
ctx.stroke();
}

Expand Down Expand Up @@ -129,8 +129,8 @@ export function drawDiagonalLineByBorderType(ctx: UniverRenderingContext, type:

// ctx.clearRect(drawStartX - 1, drawStartY - 1, drawEndX - drawStartX + 2, drawEndY - drawStartY + 2);
ctx.beginPath();
ctx.moveTo(drawStartX, drawStartY);
ctx.lineTo(drawEndX, drawEndY);
ctx.moveToByPrecision(drawStartX, drawStartY);
ctx.lineToByPrecision(drawEndX, drawEndY);
ctx.stroke();
}

Expand Down
2 changes: 1 addition & 1 deletion packages/engine-render/src/components/docs/extensions/background.ts
View file
Expand Up @@ -60,7 +60,7 @@ export class Background extends docExtension {

if (background) {
ctx.fillStyle = background;
ctx.fillRect(spanStartPoint.x - 0.5, spanStartPoint.y, width + 1, contentHeight + 1);
ctx.fillRectByPrecision(spanStartPoint.x - 0.5, spanStartPoint.y, width + 1, contentHeight + 1);
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/engine-render/src/components/docs/extensions/line.ts
View file
Expand Up @@ -131,8 +131,8 @@ export class Line extends docExtension {
alignOffset
);

ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y);
ctx.moveToByPrecision(start.x, start.y);
ctx.lineToByPrecision(end.x, end.y);
ctx.stroke();

ctx.restore();
Expand Down
8 changes: 4 additions & 4 deletions packages/engine-render/src/components/sheets/extensions/background.ts
View file
Expand Up @@ -112,10 +112,10 @@ export class Background extends SheetExtension {
endX = mergeInfo.endX;
}

ctx.moveTo(startX, startY);
ctx.lineTo(startX, endY);
ctx.lineTo(endX, endY);
ctx.lineTo(endX, startY);
ctx.moveToByPrecision(startX, startY);
ctx.lineToByPrecision(startX, endY);
ctx.lineToByPrecision(endX, endY);
ctx.lineToByPrecision(endX, startY);
});
ctx.closePath();
ctx.fill();
Expand Down
10 changes: 5 additions & 5 deletions packages/engine-render/src/components/sheets/extensions/column-header-layout.ts
View file
Expand Up @@ -55,7 +55,7 @@ export class ColumnHeaderLayout extends SheetExtension {

// painting background
ctx.fillStyle = getColor([248, 249, 250])!;
ctx.fillRect(0, 0, columnTotalWidth, columnHeaderHeight);
ctx.fillRectByPrecision(0, 0, columnTotalWidth, columnHeaderHeight);

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
Expand All @@ -81,8 +81,8 @@ export class ColumnHeaderLayout extends SheetExtension {
}

// painting line border
ctx.moveTo(columnEndPosition, 0);
ctx.lineTo(columnEndPosition, columnHeaderHeight);
ctx.moveToByPrecision(columnEndPosition, 0);
ctx.lineToByPrecision(columnEndPosition, columnHeaderHeight);

// painting column header text
const middleCellPos = preColumnPosition + (columnEndPosition - preColumnPosition) / 2;
Expand All @@ -92,8 +92,8 @@ export class ColumnHeaderLayout extends SheetExtension {

// painting line bottom border
const columnHeaderHeightFix = columnHeaderHeight - 0.5 / scale;
ctx.moveTo(0, columnHeaderHeightFix);
ctx.lineTo(columnTotalWidth, columnHeaderHeightFix);
ctx.moveToByPrecision(0, columnHeaderHeightFix);
ctx.lineToByPrecision(columnTotalWidth, columnHeaderHeightFix);
ctx.stroke();
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/engine-render/src/components/sheets/extensions/font.ts
View file
Expand Up @@ -152,7 +152,7 @@ export class Font extends SheetExtension {
if (overflowRectangle) {
const { startColumn, startRow, endColumn, endRow } = overflowRectangle;
if (startColumn === endColumn && startColumn === columnIndex) {
ctx.rect(
ctx.rectByPrecision(
startX + 1 / scale,
startY + 1 / scale,
cellWidth - 2 / scale,
Expand Down Expand Up @@ -202,7 +202,7 @@ export class Font extends SheetExtension {
}
}
} else {
ctx.rect(startX + 1 / scale, startY + 1 / scale, cellWidth - 2 / scale, cellHeight - 2 / scale);
ctx.rectByPrecision(startX + 1 / scale, startY + 1 / scale, cellWidth - 2 / scale, cellHeight - 2 / scale);
ctx.clip();
ctx.clearRectForTexture(
startX + 1 / scale,
Expand Down Expand Up @@ -292,7 +292,7 @@ export class Font extends SheetExtension {
const startX = columnWidthAccumulation[startColumn - 1] || 0;
const endX = columnWidthAccumulation[endColumn] || columnWidthAccumulation[columnWidthAccumulation.length - 1];

ctx.rect(startX, startY, endX - startX, endY - startY);
ctx.rectByPrecision(startX, startY, endX - startX, endY - startY);
ctx.clip();
ctx.clearRectForTexture(startX, startY, endX - startX, endY - startY);
}
Expand Down
10 changes: 5 additions & 5 deletions packages/engine-render/src/components/sheets/extensions/row-header-layout.ts
View file
Expand Up @@ -52,7 +52,7 @@ export class RowHeaderLayout extends SheetExtension {
const scale = this._getScale(parentScale);

ctx.fillStyle = getColor([248, 249, 250])!;
ctx.fillRect(0, 0, rowHeaderWidth, rowTotalHeight);
ctx.fillRectByPrecision(0, 0, rowHeaderWidth, rowTotalHeight);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = getColor([0, 0, 0])!;
Expand All @@ -74,8 +74,8 @@ export class RowHeaderLayout extends SheetExtension {
// Skip hidden rows
continue;
}
ctx.moveTo(0, rowEndPosition);
ctx.lineTo(rowHeaderWidth, rowEndPosition);
ctx.moveToByPrecision(0, rowEndPosition);
ctx.lineToByPrecision(rowHeaderWidth, rowEndPosition);

const middleCellPos = preRowPosition + (rowEndPosition - preRowPosition) / 2;
ctx.fillText(`${r + 1}`, rowHeaderWidth / 2, middleCellPos + MIDDLE_CELL_POS_MAGIC_NUMBER); // Magic number 1, because the vertical alignment appears to be off by 1 pixel.
Expand All @@ -86,8 +86,8 @@ export class RowHeaderLayout extends SheetExtension {
// painting line bottom border
const rowHeaderWidthFix = rowHeaderWidth - 0.5 / scale;

ctx.moveTo(rowHeaderWidthFix, 0);
ctx.lineTo(rowHeaderWidthFix, rowTotalHeight);
ctx.moveToByPrecision(rowHeaderWidthFix, 0);
ctx.lineToByPrecision(rowHeaderWidthFix, rowTotalHeight);
ctx.stroke();
}
}
Expand Down
28 changes: 14 additions & 14 deletions packages/engine-render/src/components/sheets/spreadsheet.ts
View file
Expand Up @@ -296,7 +296,7 @@ export class Spreadsheet extends SheetComponent {
const { left: diffLeft, right: diffRight, bottom: diffBottom, top: diffTop } = diffBound;
ctx.save();
ctx.beginPath();
ctx.rect(
ctx.rectByPrecision(
diffLeft - rowHeaderWidth - FIX_ONE_PIXEL_BLUR_OFFSET,
diffTop - columnHeaderHeight - FIX_ONE_PIXEL_BLUR_OFFSET,
diffRight - diffLeft + rowHeaderWidth + FIX_ONE_PIXEL_BLUR_OFFSET * 2,
Expand Down Expand Up @@ -509,27 +509,27 @@ export class Spreadsheet extends SheetComponent {

ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);

ctx.moveTo(startX, startY);
ctx.lineTo(endX, startY);
ctx.moveToByPrecision(startX, startY);
ctx.lineToByPrecision(endX, startY);

for (let r = 0; r <= rowEnd; r++) {
if (r < 0 || r > rowHeightAccumulationLength - 1) {
continue;
}
const rowEndPosition = rowHeightAccumulation[r];
ctx.moveTo(startX, rowEndPosition);
ctx.lineTo(endX, rowEndPosition);
ctx.moveToByPrecision(startX, rowEndPosition);
ctx.lineToByPrecision(endX, rowEndPosition);
}

ctx.moveTo(startX, startY);
ctx.lineTo(startX, endY);
ctx.moveToByPrecision(startX, startY);
ctx.lineToByPrecision(startX, endY);
for (let c = 0; c <= endColumn; c++) {
if (c < 0 || c > columnWidthAccumulationLength - 1) {
continue;
}
const columnEndPosition = columnWidthAccumulation[c];
ctx.moveTo(columnEndPosition, startY);
ctx.lineTo(columnEndPosition, endY);
ctx.moveToByPrecision(columnEndPosition, startY);
ctx.lineToByPrecision(columnEndPosition, endY);
}
// console.log('xx2', scaleX, scaleY, columnTotalWidth, rowTotalHeight, rowHeightAccumulation, columnWidthAccumulation);
ctx.stroke();
Expand Down Expand Up @@ -602,15 +602,15 @@ export class Spreadsheet extends SheetComponent {
const endX =
columnWidthAccumulation[endColumn] || columnWidthAccumulation[columnWidthAccumulation.length - 1];

ctx.clearRect(startX, startY, endX - startX, endY - startY);
ctx.clearRectByPrecision(startX, startY, endX - startX, endY - startY);

// After ClearRect, the lines will become thinner, and the lines will be repaired below.
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, startY);
ctx.lineTo(endX, endY);
ctx.lineTo(startX, endY);
ctx.lineTo(startX, startY);
ctx.lineToByPrecision(endX, startY);
ctx.lineToByPrecision(endX, endY);
ctx.lineToByPrecision(startX, endY);
ctx.lineToByPrecision(startX, startY);
ctx.stroke();
ctx.closePath();
}
Expand Down

0 comments on commit 97ed99a

Please sign in to comment.