Pixi.js Retina顯示畫布的尺寸加倍

我有一些問題獲取pixi.js 2. +使用視網膜顯示器。Pixi.js Retina顯示畫布的尺寸加倍

scale = window.devicePixelRatio 
width = 960 
height = 500 

renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:scale}) 
stage = new PIXI.Stage(0xFFFFFF)  

if scale is 2 
    bgImg = '[email protected]' 
else 
    bgImg = 'img.png' 
background = PIXI.Sprite.fromImage bgImg 
stage.addChild background

上面的代碼在非視網膜上產生一個正確比例的畫布和圖像。然而，當我在視網膜顯示器上運行這個畫布時，畫布的大小是它的兩倍，而圖像的大小是它的四倍。我究竟做錯了什麼？

來源

2015-03-19 Brenwell

@ 2x是正確的。它可以是文件夾名稱或附加到圖像名稱。

assets/@2x/image.png或assets/[email protected]

關於畫布大小調整的問題，你可以運行這個，看看你是否有同樣的問題。 http://adireddy.github.io/demos/haxe-pixi/v3/retina.html

來源

2015-03-19 13:35:36 Adi

謝謝，這解決了我的一半問題，但我仍然有問題，整個畫布的大小不是分辨率加倍。至少現在的圖像只有兩倍的大小，不再是4倍。 – Brenwell 2015-03-19 14:41:51

您的示例按照我期望的正確加載方式進行加載 – Brenwell 2015-03-19 14:43:52

因此，我檢查了您的代碼並使其正常工作。請看下面的答案。 – Brenwell 2015-03-19 14:55:50

感謝@Adi我得到了它的工作。也許我必須在畫布上設置寬度&高度，然後再附加它。不太確定，但它的工作

@scale = window.devicePixelRatio 
width = 960 
height = 556 

@_canvas = window.document.createElement("canvas") 
@_canvas.style.width = width + "px" 
@_canvas.style.height = height + "px" 
container = document.getElementById 'container' 
container.appendChild(@_canvas) 

renderingOptions = 
    view: @_canvas 
    resolution: @scale 

renderer = new PIXI.CanvasRenderer(width, height, renderingOptions)

來源

2015-03-19 14:57:12 Brenwell

Pixi.js Retina顯示畫布的尺寸加倍

回答

相關問題