Browse Source

Refactoring in Canvas.js (#3030)

gemini
wimrijnders 7 years ago
committed by yotamberk
parent
commit
41677bdbf6
1 changed files with 26 additions and 20 deletions
  1. +26
    -20
      lib/network/modules/Canvas.js

+ 26
- 20
lib/network/modules/Canvas.js View File

@ -189,12 +189,7 @@ class Canvas {
} }
else { else {
let ctx = this.frame.canvas.getContext("2d"); let ctx = this.frame.canvas.getContext("2d");
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1);
this._setPixelRatio(ctx);
this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
} }
@ -264,11 +259,7 @@ class Canvas {
// update the pixel ratio // update the pixel ratio
let ctx = this.frame.canvas.getContext("2d"); let ctx = this.frame.canvas.getContext("2d");
let previousRatio = this.pixelRatio; // we cache this because the camera state storage needs the old value let previousRatio = this.pixelRatio; // we cache this because the camera state storage needs the old value
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1);
this._setPixelRatio(ctx);
if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) { if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
this._getCameraState(previousRatio); this._getCameraState(previousRatio);
@ -296,26 +287,29 @@ class Canvas {
// this would adapt the width of the canvas to the width from 100% if and only if // this would adapt the width of the canvas to the width from 100% if and only if
// there is a change. // there is a change.
let newWidth = Math.round(this.frame.canvas.clientWidth * this.pixelRatio);
let newHeight = Math.round(this.frame.canvas.clientHeight * this.pixelRatio);
// store the camera if there is a change in size. // store the camera if there is a change in size.
if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio) || this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) {
if (this.frame.canvas.width !== newWidth || this.frame.canvas.height !== newHeight) {
this._getCameraState(previousRatio); this._getCameraState(previousRatio);
} }
if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) {
this.frame.canvas.width = Math.round(this.frame.canvas.clientWidth * this.pixelRatio);
if (this.frame.canvas.width !== newWidth) {
this.frame.canvas.width = newWidth;
emitEvent = true; emitEvent = true;
} }
if (this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) {
this.frame.canvas.height = Math.round(this.frame.canvas.clientHeight * this.pixelRatio);
if (this.frame.canvas.height !== newHeight) {
this.frame.canvas.height = newHeight;
emitEvent = true; emitEvent = true;
} }
} }
if (emitEvent === true) { if (emitEvent === true) {
this.body.emitter.emit('resize', { this.body.emitter.emit('resize', {
width:Math.round(this.frame.canvas.width / this.pixelRatio),
height:Math.round(this.frame.canvas.height / this.pixelRatio),
oldWidth: Math.round(oldWidth / this.pixelRatio),
width : Math.round(this.frame.canvas.width / this.pixelRatio),
height : Math.round(this.frame.canvas.height / this.pixelRatio),
oldWidth : Math.round(oldWidth / this.pixelRatio),
oldHeight: Math.round(oldHeight / this.pixelRatio) oldHeight: Math.round(oldHeight / this.pixelRatio)
}); });
@ -330,6 +324,18 @@ class Canvas {
}; };
/**
* @private
*/
_setPixelRatio(ctx) {
this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1);
}
/** /**
* Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
* the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
@ -397,4 +403,4 @@ class Canvas {
} }
export default Canvas;
export default Canvas;

Loading…
Cancel
Save