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显示画布的尺寸加倍

回答

相关问题