waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix blurry text by supporting floating pt devicePixelRatios

Browse Source
This commit is contained in:
Daniel Imms
2017-09-06 10:36:34 -07:00
parent b69ff5d31a
commit fb90c98f81
2 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/BaseRenderLayer.ts
+24 -5
View File
@@ -48,7 +48,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
*/
private _refreshCharAtlas(terminal: ITerminal, colorSet: IColorSet): void {
this._charAtlas = null;
const result = acquireCharAtlas(terminal, this.colors);
const result = acquireCharAtlas(terminal, this.colors, this.scaledCharWidth, this.scaledCharHeight);
if (result instanceof HTMLCanvasElement) {
this._charAtlas = result;
} else {
@@ -57,12 +57,31 @@ export abstract class BaseRenderLayer implements IRenderLayer {
}
public resize(terminal: ITerminal, canvasWidth: number, canvasHeight: number, charSizeChanged: boolean): void {
this.scaledCharWidth = terminal.charMeasure.width * window.devicePixelRatio;
this.scaledCharHeight = terminal.charMeasure.height * window.devicePixelRatio;
// Calculate the scaled character dimensions, if devicePixelRatio is a
// floating point number then the value is ceiled to ensure there is enough
// space to draw the character to the cell
this.scaledCharWidth = Math.ceil(terminal.charMeasure.width * window.devicePixelRatio);
this.scaledCharHeight = Math.ceil(terminal.charMeasure.height * window.devicePixelRatio);
// Calculate the scaled line height, if lineHeight is not 1 then the value
// will be floored because since lineHeight can never be lower then 1, there
// is a guarentee that the scaled line height will always be larger than
// scaled char height.
this.scaledLineHeight = Math.floor(this.scaledCharHeight * terminal.options.lineHeight);
// Calculate the y coordinate within a cell that text should draw from in
// order to draw in the center of a cell.
this.scaledLineDrawY = terminal.options.lineHeight === 1 ? 0 : Math.round((this.scaledLineHeight - this.scaledCharHeight) / 2);
this._canvas.width = canvasWidth * window.devicePixelRatio;
this._canvas.height = canvasHeight * window.devicePixelRatio;
// Recalcualte the canvas dimensions; width/height define the actual number
// of pixels in the canvas, style.width/height define the size of the canvas
// on the page. It's very important that this rounds to nearest integer and
// not ceils as browsers often set window.devicePixelRatio as something like
// 1.100000023841858, when it's actually 1.1. Ceiling causes blurriness as
// the backing canvas image is 1 pixel too large for the canvas element
// size.
this._canvas.width = Math.round(canvasWidth * window.devicePixelRatio);
this._canvas.height = Math.round(canvasHeight * window.devicePixelRatio);
this._canvas.style.width = `${canvasWidth}px`;
this._canvas.style.height = `${canvasHeight}px`;
src/renderer/CharAtlas.ts
+1 -3
View File
@@ -26,9 +26,7 @@ let charAtlasCache: ICharAtlasCacheEntry[] = [];
* @param terminal The terminal.
* @param colors The colors to use.
*/
export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet): HTMLCanvasElement | Promise<ImageBitmap> {
const scaledCharWidth = terminal.charMeasure.width * window.devicePixelRatio;
const scaledCharHeight = terminal.charMeasure.height * window.devicePixelRatio;
export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledCharWidth: number, scaledCharHeight: number): HTMLCanvasElement | Promise<ImageBitmap> {
const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors);
// Check to see if the terminal already owns this config