Kineticjs如何在舞台上居中图像并根据浏览器调整大小

Posted 2023-02-26

技术标签:

【中文标题】Kineticjs如何在舞台上居中图像并根据浏览器调整大小【英文标题】：Kineticjs how to centre image on stage and resize depending on browser 【发布时间】：2013-02-20 02:22:58 【问题描述】：

我正在向舞台添加一个图像作为背景图像和一个矩形。如何确保矩形在舞台上居中并且背景根据浏览器调整大小？

<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>

【问题讨论】：

【参考方案1】：

第一件事，

你有一个小错误，除非你出于某种原因打算这样：

//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

【讨论】：

您好 EliteOctagon，感谢您的回复。我可以使用 stage.getWidth 和 stage.getHeight 来调整背景图像以适应屏幕尺寸吗？我试过了，但它不显示图像。我发现了为什么它不适用于图像。我必须分配宽度和高度width: stage.getWidth() 和height: stage.getHeight()。唯一的问题是 bg 图像不会在 iPhone 和 iPad 的 safari 上显示 :( 知道为什么吗？我不知道。有什么方法可以在 ios 中显示错误控制台？另外，你还记得重绘图层吗？还有其他可以测试的浏览器吗？还有任何其他移动设备，如 android？

以上是关于Kineticjs如何在舞台上居中图像并根据浏览器调整大小的主要内容，如果未能解决你的问题，请参考以下文章

在 KineticJS 中移除舞台

在 KineticJS 中检测舞台上的点击而不是形状上的点击