scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean up and simplify code from pull request #580 and fix CSS in examples accordingly.

Browse source
This commit is contained in:
Jürg Lehni 2014-12-30 00:16:51 +01:00
parent ac9c3f03c4
commit a07dc98046
4 changed files with 57 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/Games/Paperoids.html
View file

@ -491,10 +491,20 @@
} }
</script> </script>
<style type="text/css"> <style type="text/css">
html,
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
background-color: #000; height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
body {
background: #000;
font-family:Helvetica,Arial; font-family:Helvetica,Arial;
} }
@ -550,8 +560,8 @@
} }
</style> </style>
</head> </head>
<body style="background:black"> <body>
<canvas style="position:absolute" id="canvas" resize stats></canvas> <canvas id="canvas" resize stats></canvas>
<div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>&#8592;</b> and <b>&#8594;</b> to rotate. <b>&#8593;</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div> <div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>&#8592;</b> and <b>&#8594;</b> to rotate. <b>&#8593;</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div>
<div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div> <div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div>

8
examples/css/style.css
View file

@ -1,4 +1,12 @@
html,
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 100%;
height: 100%;
} }

23
src/view/CanvasView.js
View file

@ -60,23 +60,14 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
}, },
_setViewSize: function(size) { _setViewSize: function(size) {
var width = size.width, var element = this._element,
height = size.height, pixelRatio = this._pixelRatio;
pixelRatio = this._pixelRatio, // Upscale the canvas if the pixel ratio is more than 1.
element = this._element, element.width = size.width * pixelRatio;
style = element.style; element.height = size.height * pixelRatio;
// Upscale the canvas if the two ratios don't match.
element.width = width * pixelRatio;
element.height = height * pixelRatio;
if (pixelRatio !== 1) { if (pixelRatio !== 1) {
// If the canvas is resizable then don't override it otherwise // Scale the context to counter the fact that we've manually scaled
// give it fixed dimensions so it doesn't get resized. // our canvas element.
if (this._resizable === false) {
style.width = width + 'px';
style.height = height + 'px';
}
// Now scale the context to counter the fact that we've manually
// scaled our canvas element.
this._context.scale(pixelRatio, pixelRatio); this._context.scale(pixelRatio, pixelRatio);
} }
}, },

33
src/view/View.js
View file

@ -53,42 +53,37 @@ var View = Base.extend(Emitter, /** @lends View# */{
tapHighlightColor: 'rgba(0,0,0,0)' tapHighlightColor: 'rgba(0,0,0,0)'
}); });
var getCanvasSize = function() { function getSize(name) {
return element[name] || parseInt(element.getAttribute(name), 10);
};
function getCanvasSize() {
// Try visible size first, since that will help handling previously // Try visible size first, since that will help handling previously
// scaled canvases (e.g. when dealing with pixel-ratio) // scaled canvases (e.g. when dealing with pixel-ratio)
size = DomElement.getSize(element); var size = DomElement.getSize(element);
if (size.isNaN() || size.isZero()) { return size.isNaN() || size.isZero()
// If the element is invisible, we cannot directly access // If the element is invisible, we cannot directly access
// element.width / height, because they would appear 0. // element.width / height, because they would appear 0.
// Reading the attributes should still work. // Reading the attributes should still work.
var getSize = function(name) { ? new Size(getSize('width'), getSize('height'))
return element[name] : size;
|| parseInt(element.getAttribute(name), 10);
};
size = new Size(getSize('width'), getSize('height'));
}
return size;
}; };
// If the element has the resize attribute, listen to resize events and // If the element has the resize attribute, listen to resize events and
// update its coordinate space accordingly // update its coordinate space accordingly
this._resizable = PaperScope.hasAttribute(element, 'resize'); if (PaperScope.hasAttribute(element, 'resize')) {
if (this._resizable) {
var that = this; var that = this;
this._windowEvents = { DomEvent.add(window, this._windowEvents = {
resize: function() { resize: function() {
// setViewSize is aware of a resizable canvas and only updates the
// coordinate space based on the physical dimensions and pixel ratio
that.setViewSize(getCanvasSize()); that.setViewSize(getCanvasSize());
} }
}; });
DomEvent.add(window, this._windowEvents);
} }
// Set canvas size even if we just deterined the size from it, since // Set canvas size even if we just determined the size from it, since
// it might have been set to a % size, in which case it would use some // it might have been set to a % size, in which case it would use some
// default internal size (300x150 on WebKit) and scale up the pixels. // default internal size (300x150 on WebKit) and scale up the pixels.
// We also need this call here for HiDPI support. // We also need this call here for HiDPI support.
this._setViewSize(getCanvasSize()); this._setViewSize(size = getCanvasSize());
// TODO: Test this on IE: // TODO: Test this on IE:
if (PaperScope.hasAttribute(element, 'stats') if (PaperScope.hasAttribute(element, 'stats')
&& typeof Stats !== 'undefined') { && typeof Stats !== 'undefined') {