垂直排序对象与它们之间的空白空间

我正在绘制一个简单的面板（使用Phaser.Graphics），其中将包含预定义数量的列表条目（也使用Phaser.Graphics绘制）。每个列表条目的大小都是动态计算的，以适应面板大小。垂直排序对象与它们之间的空白空间

我的列表条目的宽度是（+ - ）与面板的宽度相同。为了获得高度，我将面板的高度除以列表条目的数量和边距大小。

结果几乎准确，但我仍然得到一些额外的或缺少最后一个列表项下的一些像素。所以，我想我的计算是不正确的或失去了一些东西......

var game = new Phaser.Game(400, 300, Phaser.AUTO, 'phaser-example', { 
 
    create: create 
 
}); 
 

 
var panel = null; 
 
var listItems = 3 
 
var listEntries = []; 
 

 
function create() { 
 
    createPanel(game.world.centerX, game.world.centerY, game.world.width - 50, game.world.height - 100); 
 
    createList(panel); 
 
} 
 

 
function createPanel(x, y, width, height) { 
 
    panel = game.make.graphics(0, 0); 
 
    panel.position.x = x - (width/2); 
 
    panel.position.y = y - (height/2); 
 
    panel.lineStyle(2, 0x999999, 0.4); 
 
    panel.beginFill(0x0d1a26, 0.6); 
 
    panel.drawRect(0, 0, width, height); 
 
    panel.endFill(); 
 
    game.world.add(panel) 
 
} 
 

 
function createList(parent) { 
 
    let child; 
 
    let margin = 5; 
 
    let width = parent.width - parent.lineWidth; //// - borders width? //// 
 
    let height = (parent.height - (listItems * (margin * 2)))/listItems; 
 
    let centerX = ((parent.width - width)/2) - 1; /// - left-border width? /// 
 

 
    let prev_pos = 0; 
 
    for (let e = 0, e_l = listItems; e < e_l; e++) { 
 

 
    listEntries[e] = this.game.make.graphics(0, 0); 
 
    createListEntry(listEntries[e], width, height); 
 
    child = parent.addChild(listEntries[e]); 
 

 
    child.position.x += centerX; 
 
    if (e > 0) { 
 
     child.position.y += prev_pos + (margin * 2); 
 
    } else { 
 
     child.position.y += prev_pos + margin; 
 
    } 
 
    prev_pos = child.position.y + height; 
 
    console.log(child.position.y) 
 
    } 
 
} 
 

 
function createListEntry(entry, width, height) { 
 
    entry.clear(); 
 
    entry.lineStyle(2, 0x999999, 0.5); 
 
    entry.beginFill(0x0d1a26, 0.7); 
 
    entry.drawRect(0, 0, width, height); 
 
    entry.endFill(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    canvas { 
 
     position: relative; 
 
     margin: 0 auto; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

来源

2017-03-24 Alexus

请注意，你的HTML也无效。你应该把'script'元素放在你的'body'中。 –

整数像素。

从内存Phaser（大约2-3年前的版本）将使用JavaScript中的所有渲染坐标转换为整数的优化。

如果你给它双打它将会落地（或者我不记得哪一个）。由于你有一小部分，你通过你的位置prev_pos不符合面板的实际位置。

简单的解决方法是只给Phaser整数。在这种情况下，使用了prev_pos = Math.ceil(child.position.y + height);

固定？

您的代码与小的变化评论。

var game = new Phaser.Game(400, 300, Phaser.AUTO, 'phaser-example', { 
 
    create: create 
 
}); 
 

 
var panel = null; 
 
var listItems = 3 
 
var listEntries = []; 
 

 
function create() { 
 
    createPanel(game.world.centerX, game.world.centerY, game.world.width - 50, game.world.height - 100); 
 
    createList(panel); 
 
} 
 

 
function createPanel(x, y, width, height) { 
 
    panel = game.make.graphics(0, 0); 
 
    panel.position.x = x - (width/2); 
 
    panel.position.y = y - (height/2); 
 
    panel.lineStyle(2, 0x999999, 0.4); 
 
    panel.beginFill(0x0d1a26, 0.6); 
 
    panel.drawRect(0, 0, width, height); 
 
    panel.endFill(); 
 
    game.world.add(panel) 
 
} 
 

 
function createList(parent) { 
 
    let child; 
 
    let margin = 5; 
 
    let width = parent.width - parent.lineWidth; //// - borders width? //// 
 
    let height = (parent.height - (listItems * (margin * 2)))/listItems; 
 
    let centerX = ((parent.width - width)/2) - 1; /// - left-border width? /// 
 

 
    let prev_pos = 0; 
 
    for (let e = 0, e_l = listItems; e < e_l; e++) { 
 

 
    listEntries[e] = this.game.make.graphics(0, 0); 
 
    createListEntry(listEntries[e], width, height); 
 
    child = parent.addChild(listEntries[e]); 
 

 
    child.position.x += centerX; 
 
    if (e > 0) { 
 
     child.position.y += prev_pos + (margin * 2); 
 
    } else { 
 
     child.position.y += prev_pos + margin; 
 
    } 
 
    // The new expression    
 
    prev_pos = Math.ceil(child.position.y + height); 
 
    //.........^^^^^^^^^^.........................^ 
 
    // the added code. 
 
    } 
 
} 
 

 
function createListEntry(entry, width, height) { 
 
    entry.clear(); 
 
    entry.lineStyle(2, 0x999999, 0.5); 
 
    entry.beginFill(0x0d1a26, 0.7); 
 
    entry.drawRect(0, 0, width, height); 
 
    entry.endFill(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    canvas { 
 
     position: relative; 
 
     margin: 0 auto; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

来源

2017-03-24 12:53:54 Blindman67

垂直排序对象与它们之间的空白空间

回答

整数像素。

固定？

相关问题