Question

我们如何在通过KineticJS创建的画布中实现跟随。

当浏览器窗口改变大小时，Canvas及其包含的形状应相应地适合舞台。

我试过跟jsfiddle，

   var stage = new Kinetic.Stage({
          container: 'container',
          width: 800,
          height: 600
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
          x: 100,
          y: 100,
          width: 100,
          height: 50,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 10
      });

 var rect2 = new Kinetic.Rect({
          x: 150,
          y: 120,
          width: 100,
          height: 50,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 10
      });
      layer.add(rect);
 layer.add(rect2);
      stage.add(layer);

      var onResize = function () {
          // browser viewport size
          var w = window.innerWidth;
          var h = window.innerHeight;

          // stage dimensions
          var ow = stage.getWidth(); // your stage width
          var oh = stage.getHeight(); // your stage height
          var keepAspectRatio = false;
          if (keepAspectRatio) {
              // keep aspect ratio
              var scale = Math.min(w / ow, h / oh);
              stage.setScale(scale);
              // adjust canvas size
              stage.setSize(ow * scale, oh * scale);

          } else {
              // scale to exact fit
              stage.setScale((w / ow), (h / oh));
              // adjust canvas size
              stage.setSize(stageWidth * getScaleX(), stageHeight * getScaleY());

          }

          // update the stage
          stage.draw()
      }



      window.onresize = function () {
          onResize();
      }

resize jsfiddle reference

Answer 1

您可以捕获resize事件并使用stage调整动态setSize(width, height)的大小以获得所需的结果。要匹配高度，请使用window.innerHeight属性的变体。

window.onresize = function(){ ... }

动态画布在KineticJS中重新调整大小

1 个答案: