HoshinoKoji/psychojs
1
0
Fork 0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-10 10:40:54 +00:00
Code Actions Packages Releases Activity

Fix blurry Pixi canvas

Browse Source 
Add
resolution: window.devicePixelRatio,
This commit is contained in:
Sijia Zhao 2020-05-19 18:40:56 +01:00
parent 092829f325
commit d4b52796c9
1 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js/core/Window.js
View File

@ -1,6 +1,6 @@
/**
* Window responsible for displaying the experiment stimuli
*
*
* @author Alain Pitiot
* @version 2020.1
* @copyright (c) 2020 Ilixa Ltd. ({@link http://ilixa.com})
@ -15,7 +15,7 @@ import { Logger } from "./Logger";
/**
* <p>Window displays the various stimuli of the experiment.</p>
* <p>It sets up a [PIXI]{@link http://www.pixijs.com/} renderer, which we use to render the experiment stimuli.</p>
*
*
* @name module:core.Window
* @class
* @extends PsychObject
@ -33,7 +33,7 @@ export class Window extends PsychObject {
/**
* Getter for monitorFramePeriod.
*
*
* @name module:core.Window#monitorFramePeriod
* @function
* @public
@ -95,9 +95,9 @@ export class Window extends PsychObject {
/**
* Close the window.
*
*
* <p> Note: this actually only removes the canvas used to render the experiment stimuli.</p>
*
*
* @name module:core.Window#close
* @function
* @public
@ -121,7 +121,7 @@ export class Window extends PsychObject {
{
this._renderer.destroy();
}
window.removeEventListener('resize', this._resizeCallback);
window.removeEventListener('orientationchange', this._resizeCallback);
@ -131,12 +131,12 @@ export class Window extends PsychObject {
/**
* Estimate the frame rate.
*
*
* @name module:core.Window#getActualFrameRate
* @function
* @public
* @return {number} always returns 60.0 at the moment
*
*
* @todo estimate the actual frame rate.
*/
getActualFrameRate()
@ -148,7 +148,7 @@ export class Window extends PsychObject {
/**
* Take the browser full screen if possible.
*
*
* @name module:core.Window#adjustScreenSize
* @function
* @public
@ -227,9 +227,9 @@ export class Window extends PsychObject {
/**
* Log a message.
*
*
* <p> Note: the message will be time-stamped at the next call to requestAnimationFrame.</p>
*
*
* @name module:core.Window#logOnFlip
* @function
* @public
@ -256,9 +256,9 @@ export class Window extends PsychObject {
/**
* Add a callback function that will run after the next screen flip, i.e. immediately after the next rendering of the
* Window.
*
*
* <p>This is typically used to reset a timer or clock.</p>
*
*
* @name module:core.Window#callOnFlip
* @function
* @public
@ -273,7 +273,7 @@ export class Window extends PsychObject {
/**
* Render the stimuli onto the canvas.
*
*
* @name module:core.Window#render
* @function
* @public
@ -315,7 +315,7 @@ export class Window extends PsychObject {
/**
* Update this window, if need be.
*
*
* @name module:core.Window#_updateIfNeeded
* @function
* @private
@ -337,7 +337,7 @@ export class Window extends PsychObject {
/**
* Recompute this window's draw list and _container children for the next animation frame.
*
*
* @name module:core.Window#_refresh
* @function
* @private
@ -376,10 +376,10 @@ export class Window extends PsychObject {
/**
* Setup PIXI.
*
*
* <p>A new renderer is created and a container is added to it. The renderer's touch and mouse events
* are handled by the {@link EventManager}.</p>
*
*
* @name module:core.Window#_setupPixi
* @function
* @private
@ -392,7 +392,8 @@ export class Window extends PsychObject {
// create a PIXI renderer and add it to the document:
this._renderer = PIXI.autoDetectRenderer(this._size[0], this._size[1], {
backgroundColor: this.color.int
backgroundColor: this.color.int,
resolution: window.devicePixelRatio,
});
this._renderer.view.style.transform = 'translatez(0)';
this._renderer.view.style.position = 'absolute';
@ -456,7 +457,7 @@ export class Window extends PsychObject {
/**
* Send all logged messages to the {@link Logger}.
*
*
* @name module:core.Window#_writeLogOnFlip
* @function
* @private