After Width: | Height: | Size: 6.6 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,75 @@
@@ -0,0 +1,75 @@
|
||||
const pixelRatio = 2; |
||||
let isDown = false, moveX = 0, moveY = 0, offsetX = 0, offsetY = 0; |
||||
let canvas, ctx; |
||||
let renderer, stage; |
||||
let sw = document.body.clientWidth; |
||||
let sh = document.body.clientHeight; |
||||
|
||||
function generateCanvas() { |
||||
canvas = document.createElement('canvas'); |
||||
document.body.appendChild(canvas); |
||||
ctx = canvas.getContext("2d"); |
||||
|
||||
window.addEventListener('resize', canvasResize, false); |
||||
canvasResize(); |
||||
|
||||
moveEvent(canvas); |
||||
} |
||||
|
||||
function canvasResize() { |
||||
sw = document.body.clientWidth; |
||||
sh = document.body.clientHeight; |
||||
|
||||
canvas.width = sw * pixelRatio; |
||||
canvas.height = sh * pixelRatio; |
||||
canvas.style.width = sw + 'px'; |
||||
canvas.style.height = sh + 'px'; |
||||
ctx.scale(pixelRatio, pixelRatio); |
||||
} |
||||
|
||||
function generatePixi(bgcolor) { |
||||
renderer = new PIXI.Renderer({ |
||||
width: sw, |
||||
height: sh, |
||||
antialias: true, |
||||
transparent: false, |
||||
autoDensity: true, |
||||
resolution: pixelRatio,//window.devicePixelRatio > 1 ? 2 : 1,
|
||||
powerPreference: "high-performance", |
||||
backgroundColor: bgcolor |
||||
}); |
||||
document.body.appendChild(renderer.view); |
||||
stage = new PIXI.Container(); |
||||
|
||||
window.addEventListener('resize', pixiResize, false); |
||||
pixiResize(); |
||||
|
||||
moveEvent(renderer.view); |
||||
} |
||||
|
||||
function pixiResize() { |
||||
sw = document.body.clientWidth; |
||||
sh = document.body.clientHeight; |
||||
|
||||
renderer.resize(sw, sh); |
||||
} |
||||
|
||||
function moveEvent(canvas) { |
||||
const hammer = new Hammer(canvas); |
||||
hammer.add(new Hammer.Pan({direction: Hammer.DIRECTION_ALL, threshold: 0})); |
||||
hammer.on("pan", (e) => { |
||||
moveX = e.deltaX + offsetX; |
||||
moveY = e.deltaY + offsetY; |
||||
if (e.isFinal) { |
||||
offsetX = moveX; |
||||
offsetY = moveY; |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function getSize(size) { |
||||
let ratio = Math.sqrt(sw * sw + sh * sh) / 1800; |
||||
if (ratio > 1) ratio = 1; |
||||
else if (ratio < 0.5) ratio = 0.5; |
||||
return size * ratio; |
||||
} |