mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 00:42:54 -05:00
Clean up and simplify code from pull request #580 and fix CSS in examples accordingly.
This commit is contained in:
Jürg Lehni
parent
ac9c3f03c4
commit
a07dc98046
4 changed files with 57 additions and 53 deletions
|
|
@ -491,10 +491,20 @@
|
|||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
font-family:Helvetica,Arial;
|
||||
}
|
||||
|
||||
|
|
@ -550,8 +560,8 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="background:black">
|
||||
<canvas style="position:absolute" id="canvas" resize stats></canvas>
|
||||
<body>
|
||||
<canvas id="canvas" resize stats></canvas>
|
||||
<div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>←</b> and <b>→</b> to rotate. <b>↑</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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,12 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Scale canvas with resize attribute to full size */
|
||||
canvas[resize] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,25 +60,16 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
|
|||
},
|
||||
|
||||
_setViewSize: function(size) {
|
||||
var width = size.width,
|
||||
height = size.height,
|
||||
pixelRatio = this._pixelRatio,
|
||||
element = this._element,
|
||||
style = element.style;
|
||||
// Upscale the canvas if the two ratios don't match.
|
||||
element.width = width * pixelRatio;
|
||||
element.height = height * pixelRatio;
|
||||
if (pixelRatio !== 1) {
|
||||
// If the canvas is resizable then don't override it otherwise
|
||||
// give it fixed dimensions so it doesn't get resized.
|
||||
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);
|
||||
}
|
||||
var element = this._element,
|
||||
pixelRatio = this._pixelRatio;
|
||||
// Upscale the canvas if the pixel ratio is more than 1.
|
||||
element.width = size.width * pixelRatio;
|
||||
element.height = size.height * pixelRatio;
|
||||
if (pixelRatio !== 1) {
|
||||
// Scale the context to counter the fact that we've manually scaled
|
||||
// our canvas element.
|
||||
this._context.scale(pixelRatio, pixelRatio);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -53,42 +53,37 @@ var View = Base.extend(Emitter, /** @lends View# */{
|
|||
tapHighlightColor: 'rgba(0,0,0,0)'
|
||||
});
|
||||
|
||||
var getCanvasSize = function() {
|
||||
// Try visible size first, since that will help handling previously
|
||||
// scaled canvases (e.g. when dealing with pixel-ratio)
|
||||
size = DomElement.getSize(element);
|
||||
if (size.isNaN() || size.isZero()) {
|
||||
// If the element is invisible, we cannot directly access
|
||||
// element.width / height, because they would appear 0.
|
||||
// Reading the attributes should still work.
|
||||
var getSize = function(name) {
|
||||
return element[name]
|
||||
|| parseInt(element.getAttribute(name), 10);
|
||||
};
|
||||
size = new Size(getSize('width'), getSize('height'));
|
||||
}
|
||||
return size;
|
||||
};
|
||||
function getSize(name) {
|
||||
return element[name] || parseInt(element.getAttribute(name), 10);
|
||||
};
|
||||
|
||||
function getCanvasSize() {
|
||||
// Try visible size first, since that will help handling previously
|
||||
// scaled canvases (e.g. when dealing with pixel-ratio)
|
||||
var size = DomElement.getSize(element);
|
||||
return size.isNaN() || size.isZero()
|
||||
// If the element is invisible, we cannot directly access
|
||||
// element.width / height, because they would appear 0.
|
||||
// Reading the attributes should still work.
|
||||
? new Size(getSize('width'), getSize('height'))
|
||||
: size;
|
||||
};
|
||||
|
||||
// If the element has the resize attribute, listen to resize events and
|
||||
// update its coordinate space accordingly
|
||||
this._resizable = PaperScope.hasAttribute(element, 'resize');
|
||||
if (this._resizable) {
|
||||
var that = this;
|
||||
this._windowEvents = {
|
||||
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());
|
||||
}
|
||||
};
|
||||
DomEvent.add(window, this._windowEvents);
|
||||
}
|
||||
// Set canvas size even if we just deterined the size from it, since
|
||||
if (PaperScope.hasAttribute(element, 'resize')) {
|
||||
var that = this;
|
||||
DomEvent.add(window, this._windowEvents = {
|
||||
resize: function() {
|
||||
that.setViewSize(getCanvasSize());
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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
|
||||
// default internal size (300x150 on WebKit) and scale up the pixels.
|
||||
// We also need this call here for HiDPI support.
|
||||
this._setViewSize(getCanvasSize());
|
||||
this._setViewSize(size = getCanvasSize());
|
||||
// TODO: Test this on IE:
|
||||
if (PaperScope.hasAttribute(element, 'stats')
|
||||
&& typeof Stats !== 'undefined') {
|
||||
|
|
|
|||
Loading…
Reference in a new issue