2022-05-03 16:50:19 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
|
|
|
|
|
<title>PIXI Resolution Doctest</title>
|
2023-05-09 13:25:39 +02:00
|
|
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
|
|
|
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
2022-05-03 16:50:19 +02:00
|
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
|
<script src="../../dist/iwmlib.js"></script>
|
|
|
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-05-09 13:25:39 +02:00
|
|
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Resolution</h1>
|
2022-05-03 16:50:19 +02:00
|
|
|
<canvas id="canvas"></canvas>
|
|
|
|
|
|
|
|
|
|
<script class="doctest">
|
|
|
|
|
const app = new PIXIApp({
|
|
|
|
|
view: canvas,
|
|
|
|
|
fpsLogging: true,
|
|
|
|
|
transparent: false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
app.setup()
|
|
|
|
|
app.run()
|
|
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const textProps = { fontSize: 72, fill: 0xffffff }
|
2022-05-03 16:50:19 +02:00
|
|
|
|
2022-05-04 09:10:01 +02:00
|
|
|
Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {
|
2022-05-03 16:50:19 +02:00
|
|
|
app.stage.removeChildren()
|
|
|
|
|
|
|
|
|
|
let sprite = null
|
|
|
|
|
let label = null
|
|
|
|
|
|
|
|
|
|
if (key === '1') {
|
|
|
|
|
sprite = PIXI.Sprite.from('resolution/image-4k.jpg')
|
|
|
|
|
label = `4096 * 2732 ~ 4K`
|
|
|
|
|
} else if (key === '2') {
|
|
|
|
|
sprite = PIXI.Sprite.from('resolution/image-8k.jpg')
|
|
|
|
|
label = `7952 * 5304 ~ 8K`
|
|
|
|
|
} else if (key === '3') {
|
|
|
|
|
const texture = PIXI.Texture.from('resolution/video-1k.mp4')
|
|
|
|
|
texture.baseTexture.resource.source.loop = true
|
|
|
|
|
sprite = new PIXI.Sprite(texture)
|
|
|
|
|
label = `1920 * 1080 = 1K`
|
|
|
|
|
} else if (key === '4') {
|
|
|
|
|
const texture = PIXI.Texture.from('resolution/video-4k.mp4')
|
|
|
|
|
texture.baseTexture.resource.source.loop = true
|
|
|
|
|
sprite = new PIXI.Sprite(texture)
|
|
|
|
|
label = `3840 * 2160 = 4K`
|
|
|
|
|
} else if (key === '5') {
|
|
|
|
|
const texture = PIXI.Texture.from('resolution/video-8k.mp4')
|
|
|
|
|
texture.baseTexture.resource.source.loop = true
|
|
|
|
|
sprite = new PIXI.Sprite(texture)
|
|
|
|
|
label = `7680 * 4320 ~ 8K`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
app.stage.addChild(sprite)
|
|
|
|
|
|
|
|
|
|
// texts
|
|
|
|
|
//--------------------
|
2022-05-04 09:10:01 +02:00
|
|
|
const shortcuts = new PIXI.Text(`Press 1 - 5 to change Sprites`, textProps)
|
|
|
|
|
shortcuts.x = 100
|
|
|
|
|
shortcuts.y = 100
|
|
|
|
|
|
2022-05-03 16:50:19 +02:00
|
|
|
const width = new PIXI.Text(`Width: ${app.renderer.width}`, textProps)
|
|
|
|
|
width.x = 100
|
2022-05-04 09:10:01 +02:00
|
|
|
width.y = shortcuts.y + shortcuts.height * 2
|
2022-05-03 16:50:19 +02:00
|
|
|
|
|
|
|
|
const height = new PIXI.Text(`Height: ${app.renderer.height}`, textProps)
|
|
|
|
|
height.x = 100
|
|
|
|
|
height.y = width.y + width.height + 10
|
|
|
|
|
|
|
|
|
|
const resolution = new PIXI.Text(`Resolution: ${app.renderer.resolution}`, textProps)
|
|
|
|
|
resolution.x = 100
|
|
|
|
|
resolution.y = height.y + height.height + 10
|
|
|
|
|
|
|
|
|
|
const devicePixelRatio = new PIXI.Text(`devicePixelRatio: ${window.devicePixelRatio}`, textProps)
|
|
|
|
|
devicePixelRatio.x = 100
|
|
|
|
|
devicePixelRatio.y = resolution.y + resolution.height + 10
|
|
|
|
|
|
|
|
|
|
const text = new PIXI.Text(label, textProps)
|
|
|
|
|
text.x = 100
|
|
|
|
|
text.y = devicePixelRatio.y + devicePixelRatio.height * 2
|
|
|
|
|
|
2022-05-04 09:10:01 +02:00
|
|
|
app.stage.addChild(shortcuts, width, height, resolution, devicePixelRatio, text)
|
2022-05-03 16:50:19 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
Mousetrap.trigger('1')
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
