foster/liabru-matter-js
0
0
Fork 0
mirror of https://github.com/liabru/matter-js.git synced 2024-11-27 09:50:52 -05:00
Code Issues Wiki Activity

added support for hidpi rendering

Browse source
This commit is contained in:
liabru 2014-12-28 18:20:54 +00:00
parent 8204d9736a
commit 4746eb9348
2 changed files with 65 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/core/Mouse.js
View file

@ -26,6 +26,7 @@ var Mouse = {};
mouse.scale = { x: 1, y: 1 };
mouse.wheelDelta = 0;
mouse.button = -1;
mouse.pixelRatio = element.getAttribute('data-pixel-ratio') || 1;
mouse.sourceEvents = {
mousemove: null,
@ -35,7 +36,7 @@ var Mouse = {};
};
mouse.mousemove = function(event) {
var position = _getRelativeMousePosition(event, mouse.element),
var position = _getRelativeMousePosition(event, mouse.element, mouse.pixelRatio),
touches = event.changedTouches;
if (touches) {
@ -51,7 +52,7 @@ var Mouse = {};
};
mouse.mousedown = function(event) {
var position = _getRelativeMousePosition(event, mouse.element),
var position = _getRelativeMousePosition(event, mouse.element, mouse.pixelRatio),
touches = event.changedTouches;
if (touches) {
@ -71,7 +72,7 @@ var Mouse = {};
};
mouse.mouseup = function(event) {
var position = _getRelativeMousePosition(event, mouse.element),
var position = _getRelativeMousePosition(event, mouse.element, mouse.pixelRatio),
touches = event.changedTouches;
if (touches) {
@ -162,9 +163,10 @@ var Mouse = {};
* @private
* @param {} event
* @param {} element
* @return ObjectExpression
* @param {number} pixelRatio
* @return {}
*/
var _getRelativeMousePosition = function(event, element) {
var _getRelativeMousePosition = function(event, element, pixelRatio) {
var elementBounds = element.getBoundingClientRect(),
rootNode = (document.documentElement || document.body.parentNode || document.body),
scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : rootNode.scrollLeft,
@ -179,11 +181,11 @@ var Mouse = {};
x = event.pageX - elementBounds.left - scrollX;
y = event.pageY - elementBounds.top - scrollY;
}
return {
x: x / (element.clientWidth / element.width),
y: y / (element.clientHeight / element.height)
x: x / (element.clientWidth / element.width * pixelRatio),
y: y / (element.clientHeight / element.height * pixelRatio)
};
};
})();
})();

62
src/render/Render.js
View file

@ -30,6 +30,7 @@ var Render = {};
options: {
width: 800,
height: 600,
pixelRatio: 1,
background: '#fafafa',
wireframeBackground: '#222',
hasBounds: false,
@ -68,6 +69,10 @@ var Render = {};
Render.setBackground(render, render.options.background);
if (render.options.pixelRatio !== 1) {
Render.setPixelRatio(render, render.options.pixelRatio);
}
if (Common.isElement(render.element)) {
render.element.appendChild(render.canvas);
} else {
@ -80,13 +85,37 @@ var Render = {};
/**
* Clears the renderer. In this implementation, this is a noop.
* @method clear
* @param {RenderPixi} render
* @param {render} render
*/
Render.clear = function(render) {
// nothing required to clear this renderer implentation
// if a scene graph is required, clear it here (see RenderPixi.js)
};
/**
* Sets the pixel ratio of the renderer and updates the canvas.
* To automatically detect the correct ratio, pass the string `'auto'` for `pixelRatio`.
* @method setPixelRatio
* @param {render} render
* @param {number} pixelRatio
*/
Render.setPixelRatio = function(render, pixelRatio) {
var options = render.options,
canvas = render.canvas;
if (pixelRatio === 'auto') {
pixelRatio = _getPixelRatio(canvas);
}
options.pixelRatio = pixelRatio;
canvas.setAttribute('data-pixel-ratio', pixelRatio);
canvas.width = options.width * pixelRatio;
canvas.height = options.height * pixelRatio;
canvas.style.width = options.width + 'px';
canvas.style.height = options.height + 'px';
render.context.scale(pixelRatio, pixelRatio);
};
/**
* Sets the background CSS property of the canvas
* @method setBackground
@ -137,12 +166,12 @@ var Render = {};
context.globalCompositeOperation = 'source-over';
// handle bounds
var boundsWidth = render.bounds.max.x - render.bounds.min.x,
boundsHeight = render.bounds.max.y - render.bounds.min.y,
boundsScaleX = boundsWidth / render.options.width,
boundsScaleY = boundsHeight / render.options.height;
if (options.hasBounds) {
var boundsWidth = render.bounds.max.x - render.bounds.min.x,
boundsHeight = render.bounds.max.y - render.bounds.min.y,
boundsScaleX = boundsWidth / options.width,
boundsScaleY = boundsHeight / options.height;
// filter out bodies that are not in view
for (i = 0; i < allBodies.length; i++) {
var body = allBodies[i];
@ -212,7 +241,7 @@ var Render = {};
if (options.hasBounds) {
// revert view transforms
context.setTransform(1, 0, 0, 1, 0, 0);
context.setTransform(options.pixelRatio, 0, 0, options.pixelRatio, 0, 0);
}
};
@ -864,6 +893,23 @@ var Render = {};
return canvas;
};
/**
* Gets the pixel ratio of the canvas.
* @method _getPixelRatio
* @private
* @param {HTMLElement} canvas
* @return {Number} pixel ratio
*/
var _getPixelRatio = function(canvas) {
var context = canvas.getContext('2d'),
devicePixelRatio = window.devicePixelRatio || 1,
backingStorePixelRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio || context.oBackingStorePixelRatio
|| context.backingStorePixelRatio || 1;
return devicePixelRatio / backingStorePixelRatio;
};
/**
* Gets the requested texture (an Image) via its path
* @method _getTexture
@ -968,4 +1014,4 @@ var Render = {};
* @type {}
*/
})();
})();