我正在向舞台添加一个图像作为背景图像和一个矩形。如何确保矩形在舞台上居中并且背景根据浏览器调整大小?
<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>