|
|
@ -189,12 +189,7 @@ class Canvas { |
|
|
|
} |
|
|
|
else { |
|
|
|
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); |
|
|
|
} |
|
|
|
|
|
|
@ -264,11 +259,7 @@ class Canvas { |
|
|
|
// update the pixel ratio
|
|
|
|
let ctx = this.frame.canvas.getContext("2d"); |
|
|
|
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) { |
|
|
|
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
|
|
|
|
// 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.
|
|
|
|
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); |
|
|
|
} |
|
|
|
|
|
|
|
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; |
|
|
|
} |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (emitEvent === true) { |
|
|
|
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) |
|
|
|
}); |
|
|
|
|
|
|
@ -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 |
|
|
|
* 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; |