scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-19 06:00:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement support for Hi-DPI canvas on Retina screens.

Browse source
This commit is contained in:
Jürg Lehni 2013-10-10 16:31:24 +02:00
parent ddc359166b
commit 22e13df102
2 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/dom/DomElement.js
View file

@ -197,6 +197,19 @@ var DomElement = new function() {
// which always starts at 0, 0
return !this.isInvisible(el) && this.getViewportBounds(el).intersects(
this.getBounds(el, true));
},
/**
* Gets the given property from the element, trying out all browser
* prefix variants.
*/
getPrefixValue: function(el, name) {
var value = el[name],
suffix = name[0].toUpperCase() + name.substring(1);
Base.each(['webkit', 'moz', 'ms', 'o'], function(prefix) {
value = el[prefix + suffix] || value;
});
return value;
}
};
};

19
src/ui/CanvasView.js
View file

@ -33,9 +33,26 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
size = new Size(1024, 768);
canvas = CanvasProvider.getCanvas(size);
}
this._context = canvas.getContext('2d');
var ctx = this._context = canvas.getContext('2d');
// Have Item count installed mouse events.
this._eventCounters = {};
// Hi-DPI Canvas support based on:
// http://www.html5rocks.com/en/tutorials/canvas/hidpi/
var ratio = (window.devicePixelRatio || 1) / (DomElement.getPrefixValue(
ctx, 'backingStorePixelRatio') || 1);
// Upscale the canvas if the two ratios don't match
if (ratio > 1) {
var width = canvas.clientWidth,
height = canvas.clientHeight,
style = canvas.style;
canvas.width = width * ratio;
canvas.height = height * ratio;
style.width = width + 'px';
style.height = height + 'px';
// Now scale the context to counter the fact that we've manually
// scaled our canvas element.
cxt.scale(ratio, ratio);
}
View.call(this, canvas);
},