从移相器画布获取高度和宽度
Posted
技术标签:
【中文标题】从移相器画布获取高度和宽度【英文标题】：Get height and width from a phaser canvas 【发布时间】：2018-06-21 20:04:55 【问题描述】：所以我使用 phaser.io 但我想打印一个数组，所以我在我的页面 html 中创建它。
要放置数组的高度和宽度，我需要知道画布的高度和宽度。
所以我应该这样做：
$('canvas').height();
任务完成。
但没有陷阱，我的画布看起来像这样：
<canvas 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>【问题讨论】：
console.log($('canevas')[0].style) 的输出是什么？请分享（添加您的问题）
我刚刚完成了。
【参考方案1】：
当你初始化 Phaser 时，它通常看起来像这样：
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game');
或类似的东西。您可以使用设置为 Phaser.Game 的任何变量（在我的情况下是 game。要获得宽度，您需要做的就是
var width = game.width;
var height = game.height;
我希望这会有所帮助。
【讨论】：
Hey ça fait très longtemps que j'ai posé cette question et je n'ai actuelement plus phaser d'installer sur ma machine donc ça va être compliqué de retester surtout que des fois ça fonctionnais des fois non . Si quelqu'un confirme que celà résout le problème je validerais。 Mais je ne pense pas. Le test est facile: vous pouvez taper "game.width" dans la console sur une page avec phaser。 Je m'excuse si mon français est 太糟糕了。 对不起，我什至没有看到我用法语写的。当我不注意时，有点附加。这是翻译：自从我问这个问题以来已经有很长时间了，我的机器上现在没有移相器，所以很难测试你的答案，特别是因为有时它有时不起作用。如果有人确认这可以解决问题，我将进行验证。但是我不这么认为。如果我没记错的话，我以前试过这个，得到了同样奇怪的结果。【参考方案2】：尽量利用
$('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 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 你有没有点击上面的Run code sn-p按钮。见控制台 @Kvasir 试试$('canvas').css('height')。以上更新。
@Kvasir 你从$('canvas').css('height')得到什么结果？
我还是得到 1101以上是关于从移相器画布获取高度和宽度的主要内容，如果未能解决你的问题，请参考以下文章