kineticjs，是否应该调整stage.setWidth()、stage.setHeight()和stage.draw()的大小？

Question

我正在尝试调整窗口大小的所有东西。我有这个函数，但似乎只调整了一层的大小( graphLayer.add(drawGraph);)我认为下面的代码应该调整所有的大小？？

function onResize(){ 
        var widowWidth = (window.innerWidth) -yPadding; // width - the padding
        var widowHeight = (window.innerHeight) -xPadding;  // Height - the padding
        stage.setWidth((window.innerWidth) -yPadding);
        stage.setHeight((window.innerHeight) -xPadding);
        stage.draw();
    }

下面是我的代码的基础

$(window).resize(onResize);
    var graph;
    var graphLayer = new Kinetic.Layer();
    var BubbleLayer = new Kinetic.Layer();
    var tooltipLayer = new Kinetic.Layer();
    var widowWidth = (window.innerWidth) -yPadding; // width - the padding
    var widowHeight = (window.innerHeight) -xPadding;  // Height - the padding


    var stage = new Kinetic.Stage({
      container: 'graph',
      width: widowWidth,  // width - the padding
      height: widowHeight,  // Height - the padding
    });

    var tooltip = new Kinetic.Label({
      opacity: 0.75,
      visible: false,
      listening: false
    });

    tooltip.add(new Kinetic.Tag({
      .........
    }));

    tooltip.add(new Kinetic.Text({
      .........
    }));

    var drawGraph = new Kinetic.Shape ({
      sceneFunc: function(ctx){
          .........
        }
        ctx.fillStrokeShape(this);
      },
      stroke: 'black',
      strokeWidth: 1
    });     

    var drawGraphquarter = new Kinetic.Shape ({
      sceneFunc: function(ctx){
        .........
        }
      },
      stroke: 'red',
      strokeWidth: 3
    });     

    // build data

    $.getJSON( "bubble_data.json", function( data ) {

        $.each( data.projects, function(i) {
            var bubbleData = [];

            .........

            bubbleData.push({
              .........
            });

            .........

            for(var n = 0; n < bubbleData.length; n++) {
              addBubble(bubbleData[n], BubbleLayer);
              stage.add(BubbleLayer);
            }

        });

        graphLayer.add(drawGraph);
        graphLayer.add(drawGraphquarter);
        stage.add(BubbleLayer);
        stage.add(graphLayer); 
        graphLayer.moveToBottom(); 
        tooltipLayer.add(tooltip);
        stage.add(tooltipLayer);
        });
    }); 

    // add bubles to layer 
    function addBubble(obj, BubbleLayer) {
      var bubble = new Kinetic.Shape({
        sceneFunc: function(ctx) {
          .........
      });
      BubbleLayer.add(bubble);
    } 

    // calendar quarter
    function getQuarter(d) {
      .........
    }

     function onResize(){ 
        var widowWidth = (window.innerWidth) -yPadding; // width - the padding
        var widowHeight = (window.innerHeight) -xPadding;  // Height - the padding
        stage.setWidth((window.innerWidth) -yPadding);
        stage.setHeight((window.innerHeight) -xPadding);
        stage.draw();
    }

Answer 1

将我的代码更新为这个。

var graph;
    var xPadding = 10;
    var yPadding = 10;
    var graphLayer = new Kinetic.Layer();
    var graphLayerQuater = new Kinetic.Layer();
    var BubbleLayer = new Kinetic.Layer();
    var tooltipLayer = new Kinetic.Layer();
    var widowWidth =  (window.innerWidth) -yPadding; // width - the padding
    var widowHeight = (window.innerHeight) -xPadding;  // Height - the padding
    var stage = new Kinetic.Stage({
      container: 'graph',
      width: widowWidth,  
      height: widowHeight,  
    });

    var initialScale = stage.scale(); //returns {x: 1, y: 1} 
    var initialWidth = (window.innerWidth) -yPadding; // width - the padding
    var initialHeight = (window.innerHeight) -xPadding;  // Height - the padding

onresize函数

window.onresize = function(event) { 
      var width = (window.innerWidth) -yPadding;
      var height =(window.innerHeight) -xPadding; 
      var xScale =  (width  / initialWidth) * initialScale.x; 
      var yScale = (height / initialHeight) * initialScale.y;
      var newScale = {x: xScale, y: yScale};
      stage.setAttr('width', width);
      stage.setAttr('height', height);    
      stage.setAttr('scale', newScale ); 
      stage.draw();
    }