4

背景画像と長方形としてステージに画像を追加しています。長方形がステージの中央に配置され、ブラウザーに応じて背景のサイズが変更されるようにするにはどうすればよいですか?

<body style="overflow: hidden">
<div id="container" style="width:100%;height:100%;margin:auto;"></div>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 1680,
height: 1050
});

var layer = new Kinetic.Layer();
stage.add(layer);

var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: stage.getWidth() / 2,
    height: stage.getHeight() / 2,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
  });

  layer.add(rect);
  stage.add(layer);

var imageObj = new Image();
  imageObj.onload = function() {
    var myBg = new Kinetic.Image({
     x: 0,
      y: 0,
      image: imageObj,
      width: 1770,
      height: 1200,
      opacity: 0
    });

    layer.add(myBg);
    stage.add(layer);    

imageObj.src = 'img/bg.png';
  </script>
 </body>
4

1 に答える 1

5

まず最初に、

何らかの理由でこのようにすることを意図していない限り、わずかな間違いがあります。

//these lines
layer.add(myBg); // correct
stage.add(layer);   // not correct, remove, you already have the layer on the stage, why add it again?
//instead do this:
layer.draw(); // this will just redraw the layer, since you already added the object.

ステージのサイズを自動化するには、次のようにステージを作成します。

 var stage = new Kinetic.Stage({
      container: 'container',
      width: window.innerWidth,  
      height: window.innerHeight
 });

オブジェクトを中央に配置するには、ステージと比較した幅と高さを計算し、それに応じて配置する必要があります。

var rect = new Kinetic.Rect({
    x: stage.getWidth()/4,
    y: stage.getHeight()/4,
    width: stage.getWidth() / 2,
    height: stage.getHeight() / 2,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
});

長方形がステージの幅と高さの半分であるため、これは単純です。

さまざまなサイズを考慮したより複雑なソリューションは、次のようなものです。

    x: (stage.getWidth()/2)-(rect.getWidth()/2) // similar for height
    y: (stage.getHeight()/2)-(rect.getHeight()/2) // similar for height
于 2013-03-05T16:44:39.287 に答える