added support for hidpi rendering

liabru · Dec 28, 2014 · 4746eb9 · 4746eb9
1 parent 8204d97
commit 4746eb9
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 17 deletions.
diff --git a/src/core/Mouse.js b/src/core/Mouse.js
@@ -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)
         };
     };
 
-})();
+})();
diff --git a/src/render/Render.js b/src/render/Render.js
@@ -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 {}
      */
 
-})();
+})();