Pixi.js: 데모처럼 반응 형 화면을 만들고 싶습니다

이 데모 페이지의 소스 코드 저장소는 여기에서 사용할 수 있습니다.
소스 코드를 다운로드하는 방법은 여러 가지가 있습니다.

https://github.com/pixijs/examples

죄송합니다,
실례합니다. 그 의미는 아닙니다.

데모 코드 자체는 원하지 않습니다.

PixiJS 데모 코드가 배포 된 페이지에서 창을 확대하거나 축소하면 내부 토끼의 이미지도 동일한 비율로 조정됩니다.
https://pixijs.io/examples/#/demos -basic / container.js

이것은 데모 코드를 구현하는 것만으로는 달성 할 수 없습니다.

통과하기 힘들어서 죄송합니다.

호 그것은 단지 CSS 트릭, 당신의 확인은 어떻게 작동하는지, 당신은 또한 크기 조정 이벤트에 CSS와 맞춤 화면을 해킹 JS와 수신기를 사용할 수없는 경우.
비율이있는 화면에 자동 크기 조정에 대한 예제를 만들었습니다.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
도움이 되었나요?

그게 다야.

이전에 KonvaJS 모듈을 사용했습니다.
Stage 객체의 크기를 변경하여 상대적으로 캔버스 크기를 조정할 수있었습니다.

PixiJS로 CANVAS 자체의 크기를 조정하고 크기를 조정할 수 없습니까? 아니면 전공 아닌가?
일부 이미지는 CSS를 잘 사용하지 않습니다.

이 기사는 또 다른 접근 방식이며 도움이 될 수도 있습니다.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

감사합니다. 이상에 매우 가깝습니다.

그러나 내가 찾은 샘플과 마찬가지로 PixiJS의 캔버스는 전체 화면 크기에 걸쳐 퍼집니다.

div 안에 PixiJS 구성 요소를 추가하고 내부 크기를 조정하고 싶습니다.

즉, 처음에 썼 듯이 화면을 채우기 위해 캔버스를 펼치는 대신 PixiJS 데모 페이지와 같은 단일 div 안에 소개하고 싶습니다.
https://pixijs.io/examples/#/demos -basic / container.js

보시다시피 전체 화면이 아닌 화면의 일부 div에서 크기가 조정됩니다.

또한 캔버스의 최소 크기가 고정되어있어 매우 멋진 화면이라고 생각합니다.

이것은 이상적입니다.

감사합니다.

괜찮지 만 webMaster 개발자와 함께 기다려야합니다.
나는 이것에 대해 당신에게 대답하기에는 FrontEnd가 충분하지 않으며 저도 영어가 다소 제한적입니다.
안타깝게도 최선을 다했고 언어 장벽에 한계가 있습니다.

또한 데모 소스 페이지에서 Iframe을 사용하여 분할 할 수 있습니다. CSS 규칙으로 DIV를 만들고 ID가있는 Iframe을 내부에 넣고 새 캔버스 ID를 pixi 앱에 전달해야 할 수도 있습니다.

죄송합니다.

즉, 전체 화면에 PixiJS 캔버스를 표시하고 싶지 않습니다.

예를 들어 HTML에는 하나의 div가 있습니다. PixiJS 캔버스를 넣었다고 가정합니다.
창이 전체 화면으로 열릴 때 div가 300 * 300이라고 가정합니다.
창이 작아지면 1 : 1 비율로 크기가 조정됩니다.

확실히 데모는 iframe에서 구현됩니다.
대신 일반 html div에서 동일하게 작동하기를 원합니다.

데모처럼 전체 화면이 아니라 화면의 일부입니다.

감사합니다.

플렉스를 사용하십시오.

https://github.com/ivanpopelyshev/pixi-starfighter
https://github.com/ivanpopelyshev/pixi-starfighter/blob/master/css/index.css

캔버스 크기는 항상 동일하며 CSS를 통해 크기가 조정되고 브라우저가 크기를 조정합니다.

픽셀 대 픽셀 비율의 캔버스를 원하는 경우-css, pixi 변환, pixi 캔버스 크기 조정 방법, 캔버스 크기를 조정할 때 pixi가 수행하는 작업 등 모든 것을 배워야합니다.

PixiJS는 PixiJS 자체가 아닌 CSS로 확장됩니까?

KonvaJS는 Stage를 확장하는 방법을 제공했습니다.

가능한 한 동일하게 구현하고 싶습니다.

PixiJS는 PixiJS 자체가 아닌 CSS로 확장됩니까?

스테이지 변환 스케일, 캔버스 크기 조정, CSS 너비 / 높이 매개 변수 및 플렉스 옵션이 있습니다. 이들을 결합하여 원하는 방식으로 앱 크기를 조정하십시오.

KonvaJS는 Stage를 확장하는 방법을 제공했습니다.

PixiJS는 물건의 크기를 조정하는 것이 아니라 렌더링에 관한 것입니다. 크기 조정은 쉽습니다. 사람들이 앱을 빠르게 만들기 위해 이것이 필요하다는 것을 이해합니다. 여기에 플렉스 예제가 있습니다! 더 원하세요? 당신은 배워야합니다. 그렇지 않으면 나중에 동일한 문제가 발생하지만 수준이 다릅니다. 변형에 대한 지식이 없으면 요소를 배치하고 점을 중심으로 회전 할 수 없습니다.

또 다른 문제는 아무도 크기 조정 방법에 대한 기사를 작성하지 않았다는 것입니다. 사람들이 그것에 대해 물었고 우리는 대답했지만 여전히 단일 기사가 아닙니다!

https://www.html5gamedevs.com/forum/15-pixijs/ 에서 크기 조정에 대한 스레드를 검색 할 수 있습니다.

기사를 작성하면 위키에 넣겠습니다 : https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

가능한 한 동일하게 구현하고 싶습니다.

Konva 크기 조정 구성 요소를 PixiJS에 포팅하는 것은 좋은 생각입니다.

https://jsfiddle.net/Lhankor_Mhy/pvwr8b2g/3/

이렇게 확대 / 축소하고 드래그하여 스테이지를 이동할 수있는 KonvaJS 화면이 있습니다.

이것을 PixiJS로 옮기고 싶습니다.

그러나 PixiJS는 객체가 복잡하다고 느꼈습니다.

누구든지 샘플 코드를 작성해 주시겠습니까?

https://github.com/davidfig/pixi-viewport 를

순수한 PixiJS를 사용하고 싶습니다.
나는 또한 PixiJS V5에 매우 관심이 있었고 KonvaJS에서 옮기기로 결정했습니다.

감사합니다.

그러나 이는 달성하려는 확대 / 축소 및 드래그와 유사합니다.

KonvaJS
https://jsfiddle.net/takeshi1234/a0uqk23e/1/

PixiJS
https://jsfiddle.net/takeshi1234/hk0wbj3m/4/

저는 PixiJS에서 열심히 일하고 있으며 KonvaJS로 만든 페이지와 동일하게 작동하는 페이지를 만들려고 노력했습니다.

그러나 제대로 작동하지 않습니다.

PixiJS가 무대를 확장하면 안되나요?

구현하고 싶은 기능.
・ 캔버스의 크기는 약 800 * 800입니다.
・ 먼저 이미지를 읽고 캔버스에 올려 놓습니다. 단, 이미지 크기는 8000 * 8000에서 6000 * 6000까지 다양합니다. (정사각형은 고정되어 있습니다.)
・ 화상을 캔버스의 크기로 정확하게 표시 한 후 스테이지에 동그라미, 캐릭터 등 픽시 오브젝트를 많이 배치합니다.
・ 마우스 휠로 확대 / 축소하고 싶습니다.
・ 확대 후 드래그하여 스테이지 위치를 드래그합니다. (단, 무대 끝을 벗어나지 않습니다.)

실제로 만들어진 소스 코드를보고 조언을 해주셨 으면합니다.

좋아요, 당신은 나에게 충분한 정보를 주 셨으니, 제가 볼게요 :)

window.addEventListener ( 'resize', resize);

resize ();
var w, h;
function resize () {

var canvasRatio = 800 / 1440; ////canvas widthve canvas height
var windowRatio = window.innerHeight / window.innerWidth;



if (windowRatio < canvasRatio) {
    h = window.innerHeight;  
    w = h / canvasRatio;

} else {
    w = window.innerWidth;
    h = w * canvasRatio;

}
app.view.style.width = w + 'px';
app.view.style.height = h + 'px';
// resizeHtmlElement ();
}

const 캔버스 = document.getElementById ( "canvas")

const app = new PIXI.CanvasRenderer ({

view:canvas,
width:1440,
height:800,
backgroundColor: 0xFFFFFF,
antialias: true

})

//document.body.appendChild(app.view);

var stage = new PIXI.Container ();

위의 코드를 사용하여 크기를 조정하고 있습니다. 문제 없어요.

안녕하세요.
크기를 조정하고 싶지 않습니다.
확대 / 축소 및 드래그를 구현하려고합니다.

감사합니다.

죄송합니다. 너무 많은 사람들이 내 도움을 기다리기 때문에 귀하의 예가 나에게 약간의 불안감을 안겨주었습니다. 코드를 1 분만 살펴 보았지만 필요한 모든 것이 거의 준비되어 있음을 알았습니다. 약간의 수학 및 경험 양식을 pixi 예제에 추가하면됩니다.

사각형을 이동하는 코드가 있습니다 : https://pixijs.io/examples/#/plugin -projection / basic.js, 화면에서도 똑같이 할 수 있습니다. 확장 문제는 toLocal / toGlobal 함수를 사용하여 해결할 수 있습니다.

또한이 작업을 해결하면 미래에 도움이 될 것입니다. pixi 변환 및 상호 작용을 사용할 때 동일한 내용이 계속해서 나타납니다.

죄송합니다. 다른 사람이 도와 줄 때까지 기다려야합니다.

추신 : 누군가가 자유로울 경우를 대비하여 여유롭게 우리 직원들에게 도움을 요청했습니다.

나는 pixi-viewport가 매우 매력적인 라이브러리임을 발견하고 그것을 조사했습니다.

문서에는 v4 용이라고 나와 있지만 문제를 확인하면 v5에서 제대로 작동하는 것 같습니다.

따라서 이상을 실현하기 위해 pixi-viewport를 사용합니다.

그러나 내가 잘못 사용하든 v5와 pixi-viewport가 호환되지 않든간에 제대로 작동하지 않습니다.

이 문제가 해결되면 여기에서 발표하겠습니다.

미래에도 같은 방식으로 누군가가 곤경에 처할 때.

https://github.com/davidfig/pixi-viewport/issues/212

pixi-viewport를 사용하여이 문제를 해결할 수있었습니다.

PixiJS는 잘 발달 된 커뮤니티를 가지고 있으며 매우 수용 적입니다.

이 도서관은 정말 훌륭하다고 생각합니다.

대단히 감사합니다.