垂直排序對象與它們之間的空白空間

我正在繪製一個簡單的面板（使用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

垂直排序對象與它們之間的空白空間

回答

整數像素。

固定？

相關問題