lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 05:10:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

stage.setSize() now correctly sets the content node dimensions. Also refactored object and DOM node sizing

Browse Source
This commit is contained in:
Eric Rowell 2012-04-28 12:23:23 -07:00
parent 3ac0e5592e
commit 9f6381aef3
4 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
dist/kinetic-core.js vendored
View File

@ -1310,6 +1310,21 @@ Kinetic.Stage.prototype = {
* @param {int} height
*/
setSize: function(width, height) {
// set stage dimensions
this.attrs.width = width;
this.attrs.height = height;
// set content dimensions
this.content.style.width = this.attrs.width + 'px';
this.content.style.height = this.attrs.height + 'px';
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
// set user defined layer dimensions
var layers = this.children;
for(var n = 0; n < layers.length; n++) {
var layer = layers[n];
@ -1317,16 +1332,6 @@ Kinetic.Stage.prototype = {
layer.getCanvas().height = height;
layer.draw();
}
// set stage dimensions
this.attrs.width = width;
this.attrs.height = height;
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
},
/**
* return stage size
@ -1989,8 +1994,6 @@ Kinetic.Stage.prototype = {
*/
_buildDOM: function() {
// content
this.content.style.width = this.attrs.width + 'px';
this.content.style.height = this.attrs.height + 'px';
this.content.style.position = 'relative';
this.content.style.display = 'inline-block';
this.content.className = 'kineticjs-content';
@ -2016,16 +2019,14 @@ Kinetic.Stage.prototype = {
this.pathLayer.getCanvas().style.display = 'none';
// add buffer layer
this.bufferLayer.canvas.width = this.attrs.width;
this.bufferLayer.canvas.height = this.attrs.height;
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
this.content.appendChild(this.bufferLayer.canvas);
// add path layer
this.pathLayer.canvas.width = this.attrs.width;
this.pathLayer.canvas.height = this.attrs.height;
this.pathLayer.canvas.className = 'kineticjs-path-layer';
this.content.appendChild(this.pathLayer.canvas);
this.setSize(this.attrs.width, this.attrs.height);
},
_addId: function(node) {
if(node.attrs.id !== undefined) {

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

33
src/Stage.js
View File

@ -109,6 +109,21 @@ Kinetic.Stage.prototype = {
* @param {int} height
*/
setSize: function(width, height) {
// set stage dimensions
this.attrs.width = width;
this.attrs.height = height;
// set content dimensions
this.content.style.width = this.attrs.width + 'px';
this.content.style.height = this.attrs.height + 'px';
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
// set user defined layer dimensions
var layers = this.children;
for(var n = 0; n < layers.length; n++) {
var layer = layers[n];
@ -116,16 +131,6 @@ Kinetic.Stage.prototype = {
layer.getCanvas().height = height;
layer.draw();
}
// set stage dimensions
this.attrs.width = width;
this.attrs.height = height;
// set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width;
this.bufferLayer.getCanvas().height = height;
this.pathLayer.getCanvas().width = width;
this.pathLayer.getCanvas().height = height;
},
/**
* return stage size
@ -788,8 +793,6 @@ Kinetic.Stage.prototype = {
*/
_buildDOM: function() {
// content
this.content.style.width = this.attrs.width + 'px';
this.content.style.height = this.attrs.height + 'px';
this.content.style.position = 'relative';
this.content.style.display = 'inline-block';
this.content.className = 'kineticjs-content';
@ -815,16 +818,14 @@ Kinetic.Stage.prototype = {
this.pathLayer.getCanvas().style.display = 'none';
// add buffer layer
this.bufferLayer.canvas.width = this.attrs.width;
this.bufferLayer.canvas.height = this.attrs.height;
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
this.content.appendChild(this.bufferLayer.canvas);
// add path layer
this.pathLayer.canvas.width = this.attrs.width;
this.pathLayer.canvas.height = this.attrs.height;
this.pathLayer.canvas.className = 'kineticjs-path-layer';
this.content.appendChild(this.pathLayer.canvas);
this.setSize(this.attrs.width, this.attrs.height);
},
_addId: function(node) {
if(node.attrs.id !== undefined) {

4
tests/js/unitTests.js
View File

@ -228,11 +228,15 @@ Test.prototype.tests = {
test(stage.getSize().width === 578, 'stage height should be 578');
test(stage.getSize().height === 200, 'stage width should be 200');
test(stage.getDOM().style.width === '578px', 'content height should be 578px');
test(stage.getDOM().style.height === '200px', 'content width should be 200px');
stage.setSize(300, 150);
test(stage.getSize().width === 300, 'stage height should be 300');
test(stage.getSize().height === 150, 'stage width should be 150');
test(stage.getDOM().style.width === '300px', 'content height should be 300px');
test(stage.getDOM().style.height === '150px', 'content width should be 150px');
layer.add(circle);
stage.add(layer);