KineticJS Stage Resizing
How to autosize a KineticJS stage.
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
<div id="stage-container">stage goes here!
</div>
CSS
body { background-color: black; color: white; }
#stage-container { background-color: #009900; }
JavaScript
var iPadLandscapeDimensions = {
width: 1024,
height: 768
};
var KineticScreenAutoSize = (function() {
var self = {
$container: null,
stage: null,
baseWidth: 0,
baseHeight: 0,
initWidth: 0,
initHeight: 0
};
var init = function(selector, baseWidth, baseHeight) {
self.$container = $(selector);
self.baseWidth = baseWidth;
self.baseHeight = baseHeight;
initStage();
};
var initStage = function($container) {
self.stage = new Kinetic.Stage({
container: self.$container.attr('id'),
width: self.baseWidth,
height: self.baseHeight
});
};
/*
* Screen-Sizing Methods
*/
var autoSize = function() {
// Style required for resizeScreen below
self.$container.css({
position: 'absolute',
left: '50%',
top: '50%',
width: '100%',
height: '100%'
});
// Resize automatically
window.addEventListener('resize', resizeStageToFitScreen, false);
window.addEventListener('orientationchange', resizeStageToFitScreen, false);
// Resize
resized = resizeStageToFitScreen();
};
var resizeStageToFitScreen = function() {
/*
* Following directions here: http://stackoverflow.com/a/19645405/1093087
*/
var resized = calculateResize();
// Resize the kinetic container element proportionally
resized.cssSettings = {
left: resized.xToCenter + 'px',
top: resized.yToCenter + 'px',
width: resized.width,
height: resized.height,
}
self.$container.css(resized.cssSettings);
// Let Kinetic know its container is resizing with .setWidth and .setHeight
self.stage.setSize(resized);
// Use .setScaleX and setScaleY followed by stage.draw to scale the stage
// and all its components.
self.stage.scaleX(resized.xScale);
self.stage.scaleY(resized.yScale);
self.stage.draw();
return resized;
};
var calculateResize = function() {
var resized = {
width: 0,
...