logo标签列表

从Phaser画布中获取高度和宽度

javascriptjqueryhtmlcssphaser-framework
8
所以我使用 phaser.io，但我想打印一个数组，所以我在我的页面HTML中创建它。
为了设置数组的高度和宽度，我需要知道画布的高度和宽度。
所以我只需执行以下操作：
$('canvas').height();

任务完成。
但是现在有一个陷阱，我的画布看起来像这样：
<canvas width="1261" height="1101" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; cursor: inherit; margin-left: 1px; margin-right: 0px; margin-top: 0px;"></canvas>

每次它都返回高度的值而不是样式的值。

所以我尝试其他方法：

$('canvas').css('height');
$('canvas').[0].style.height;
$('canvas')[0].style.cssText;

但我总是得到错误的结果

非常奇怪的是，当我执行以下操作时：

console.log($('canvas')[0].style)

我在元素“height”和“cssText”中看到了我想要的结果。这里是结果的一部分：

 0:"display"
    1:"touch-action"
    2:"user-select"
    3:"-webkit-tap-highlight-color"
    4:"width"
    5:"height"
    6:"margin-left"
    7:"margin-right"
    8:"margin-top"
    ...
    cssText:"display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; margin-left: 1px; margin-right: 0px; margin-top: 0px;"
    ...
    height:"925px"
    ...

有人可以告诉我为什么吗？如果能提供解决方案就更好了。

======= 编辑 =======

当我在元素上点击时，执行$('canvas').height()会得到一些消息。实际上我可以处理它，但是我仍然不明白为什么当我执行以下操作时：

console.log($('canvas')[0].style.cssText);
console.log($('canvas').height());

我一个接一个地得到不同的结果。肯定是加载时间的问题...但对我来说仍然听起来不好。

window.onload = function() {
 
 var Level = {
  preload: function()
  {
   console.log("toto");
  },
        create: function()
  {
   console.log($('canvas').height());
   console.log($('canvas')[0].style.cssText);
   
   this.scale.pageAlignHorizontally = true;
      this.scale.pageAlignVertically = true;
      this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.refresh();
  }
    }
 const SAFE_ZONE_WIDTH=640;
 const SAFE_ZONE_HEIGHT=1101;

 var w = window.innerWidth ;
 var h = window.innerHeight ;
 var aspectRatioDevice = w/h;

 var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;
 var extraWidth = 0, extraHeight = 0, offsetWidth = 0;
 if (aspectRatioSafeZone < aspectRatioDevice) 
 {
  // have to add game pixels horizontally in order to fill the device screen
  extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;
  offsetWidth = extraWidth/2;
 } 
 else 
 {
  // have to add game pixels vertically
  extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;
 }

 var game = new Phaser.Game( SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game_div');

 game.state.add('Level', Level);
 game.state.start('Level');
}
<!DOCTYPE HTML>
<html>
<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, height = device-height, user-scalable=no, target-densitydpi = device-dpi" />
<title>niuniu</title>
<script>
    screen.orientation.lock('portrait');
</script>
<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.9.4/phaser.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 
</body>
</html>

3个回答
1
在Phaser（v3）中，您可以访问game.canvas，它是Phaser运行的画布（元素），因此：
```javascript var canvas = game.canvas; ```
现在你有了一个引用来访问画布。
const game = new Phaser.Game({ ... });
console.log(game.canvas.width, game.canvas.height);
0
尝试利用以下代码：

$('canvas').height()

或

$('canvas').attr('height')

$('canvas').css('height')

console.log($('canvas').height());
console.log($('canvas').css('height'));
console.log($('canvas').attr('height'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="1261" height="1101" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; cursor: inherit; margin-left: 1px; margin-right: 0px; margin-top: 0px;"></canvas>

两个结果都是1101。 - Kvasir
@Kvasir 请尝试使用 $('canvas').css('height')。已更新如上。 - Bhuwan
怎么可能？css()函数从样式标签中获取值。也许在你的样式标签中，高度是1101。 - Bhuwan
这是我的问题，怎么可能呢。 - Kvasir
我尝试了，但是结果完全不一样。 - Kvasir
显示剩余3条评论
0

当你初始化Phaser时，通常看起来像这样：

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game');

或类似的东西。你可以使用任何你设置为 Phaser.Game 的变量（在我的情况下是 game）。要获取宽度，你只需要执行以下操作：

var width = game.width;
var height = game.height;

希望这可以帮到你。

嘿，我提出这个问题已经很久了，现在我的机器上没有安装Phaser了，所以重新测试会很困难，特别是有时它能正常工作，有时却不能。 如果有人确认这解决了问题，我会验证的。但我不认为会这样。 - Kvasir
测试很简单：您可以在带有phaser的页面上在控制台中键入“game.width”。如果我的法语糟糕，我很抱歉。 - Andrew Feldman
很抱歉我没注意到我写的是法语。有时候不注意就会出现这种情况。以下是翻译内容： 我提出这个问题已经有一段时间了，而且我现在的机器上没有安装phaser，所以测试你的答案会比较困难，尤其是因为有时它能够正常工作，有时却不能。如果有人确认这解决了问题，我会验证一下。但我认为这不可能。如果我没记错的话，我之前尝试过这个方法，结果得到了相同奇怪的结果。 - Kvasir
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接