Pixi.js Retina显示画布的大小增加了一倍

Pixi.js Retina display canvas is doubled in size

本文关键字：增加 一倍 Retina js 显示 Pixi      更新时间：2023-09-26

我在使用pixi.js 2.+处理视网膜显示器时遇到了一些问题。

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

上面的代码在非视网膜上生成一个画布和图像，两者都具有正确的比例。然而，当我在视网膜显示器上运行此操作时，画布的大小是它的两倍，图像的大小是其4倍。我做错了什么？

@2x是正确的。它可以是文件夹名称，也可以附加到图像名称。

assets/@2x/image.png或assets/image@2x.png

关于画布调整大小的问题，你可以运行这个，看看你是否有同样的问题。http://adireddy.github.io/demos/haxe-pixi/v3/retina.html

感谢@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)
相关文章：