Pixi.js 视网膜显示屏 canvas 尺寸翻倍
Pixi.js Retina display canvas is doubled in size
我在获取 pixi.js 2.+ 以使用 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 = 'img@x2.png'
else
bgImg = 'img.png'
background = PIXI.Sprite.fromImage bgImg
stage.addChild background
以上代码在非视网膜上生成 canvas 和具有正确比例的图像。但是,当我 运行 在视网膜显示器上显示时, canvas 是两倍大,图像是四倍大。我做错了什么?
@2x 是正确的。可以是文件夹名,也可以附加到图片名后。
资产/@2x/image.png 或 assets/image@2x.png
关于 canvas 调整大小的问题,你可以 运行 这个看看你是否有同样的问题。
http://adireddy.github.io/demos/haxe-pixi/v3/retina.html
感谢@Adi,我让它工作了。也许我必须在 canvas 上设置宽度和高度,然后再附加它。不太确定,但它有效
@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)
我在获取 pixi.js 2.+ 以使用 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 = 'img@x2.png'
else
bgImg = 'img.png'
background = PIXI.Sprite.fromImage bgImg
stage.addChild background
以上代码在非视网膜上生成 canvas 和具有正确比例的图像。但是,当我 运行 在视网膜显示器上显示时, canvas 是两倍大,图像是四倍大。我做错了什么?
@2x 是正确的。可以是文件夹名,也可以附加到图片名后。
资产/@2x/image.png 或 assets/image@2x.png
关于 canvas 调整大小的问题,你可以 运行 这个看看你是否有同样的问题。 http://adireddy.github.io/demos/haxe-pixi/v3/retina.html
感谢@Adi,我让它工作了。也许我必须在 canvas 上设置宽度和高度,然后再附加它。不太确定,但它有效
@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)