fix: CanvasRenderer & WebGLRenderer stage resize bug

hiloteam · Jun 20, 2016 · 44111fa · 44111fa
1 parent aab1300
commit 44111fa
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 6 deletions.
diff --git a/src/renderer/CanvasRenderer.js b/src/renderer/CanvasRenderer.js
@@ -110,15 +110,21 @@ var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
         if(target === this.stage){
             var style = this.canvas.style,
                 oldScaleX = target._scaleX,
-                oldScaleY = target._scaleY;
+                oldScaleY = target._scaleY,
+                isStyleChange = false;
 
             if((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)){
                 target._scaleX = scaleX;
                 style.width = scaleX * target.width + "px";
+                isStyleChange = true;
             }
             if((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)){
                 target._scaleY = scaleY;
                 style.height = scaleY * target.height + "px";
+                isStyleChange = true;
+            }
+            if(isStyleChange){
+                target.updateViewport();
             }
         }else{
             var x = target.x,
@@ -223,8 +229,15 @@ var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
      * @see Renderer#resize
      */
     resize: function(width, height){
-        this.canvas.width = width;
-        this.canvas.height = height;
+        var canvas = this.canvas;
+        var stage = this.stage;
+        var style = canvas.style;
+
+        canvas.width = width;
+        canvas.height = height;
+
+        style.width = stage.width * stage.scaleX + 'px';
+        style.height = stage.height * stage.scaleY + 'px';
     }
 
 });
diff --git a/src/renderer/WebGLRenderer.js b/src/renderer/WebGLRenderer.js
@@ -230,15 +230,21 @@ var WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */{
         if(target === this.stage){
             var style = this.canvas.style,
                 oldScaleX = target._scaleX,
-                oldScaleY = target._scaleY;
+                oldScaleY = target._scaleY,
+                isStyleChange = false;
 
             if((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)){
                 target._scaleX = scaleX;
                 style.width = scaleX * target.width + "px";
+                isStyleChange = true;
             }
             if((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)){
                 target._scaleY = scaleY;
                 style.height = scaleY * target.height + "px";
+                isStyleChange = true;
+            }
+            if(isStyleChange){
+                target.updateViewport();
             }
             target.__webglWorldMatrix = target.__webglWorldMatrix||new Matrix(1, 0, 0, 1, 0, 0);
         }else{
@@ -286,8 +292,16 @@ var WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */{
      */
     resize: function(width, height){
         if(this.width !== width || this.height !== height){
-            this.width = this.canvas.width = width;
-            this.height = this.canvas.height = height;
+            var canvas = this.canvas;
+            var stage = this.stage;
+            var style = canvas.style;
+
+            this.width = canvas.width = width;
+            this.height = canvas.height = height;
+
+            style.width = stage.width * stage.scaleX + 'px';
+            style.height = stage.height * stage.scaleY + 'px';
+
             this.gl.viewport(0, 0, width, height);
 
             this.canvasHalfWidth = width * .5;

diff --git a/test/view.js b/test/view.js
@@ -4,6 +4,7 @@ describe('view', function() {
     beforeEach('init stage', function() {
         stage = new Hilo.Stage({
             container:stageElem,
+            renderType:'canvas',
             width:550,
             height:400
         });
@@ -426,8 +427,34 @@ describe('view', function() {
         });
 
         it('resize', function(){
+            stage.canvas.width.should.equal(550);
+            stage.canvas.height.should.equal(400);
+            stage.canvas.style.width.should.equal('550px');
+            stage.canvas.style.height.should.equal('400px');
+            stage.viewport.should.eql({left:0, top:0, width:550, height:400});
+
             stage.resize(400, 300);
+            stage.canvas.width.should.equal(400);
+            stage.canvas.height.should.equal(300);
+            stage.canvas.style.width.should.equal('400px');
+            stage.canvas.style.height.should.equal('300px');
             stage.viewport.should.eql({left:0, top:0, width:400, height:300});
+
+            stage.scaleX = 0.5;
+            stage.scaleY = 2;
+            stage.tick(0);
+            stage.canvas.width.should.equal(400);
+            stage.canvas.height.should.equal(300);
+            stage.canvas.style.width.should.equal('200px');
+            stage.canvas.style.height.should.equal('600px');
+            stage.viewport.should.eql({left:0, top:0, width:200, height:600});
+
+            stage.resize(300, 200);
+            stage.canvas.width.should.equal(300);
+            stage.canvas.height.should.equal(200);
+            stage.canvas.style.width.should.equal('150px');
+            stage.canvas.style.height.should.equal('400px');
+            stage.viewport.should.eql({left:0, top:0, width:150, height:400});
         });
 
         it('canvasRenderer', function(){