Pixi.js: Quero fazer uma tela responsiva como uma demonstração

o repositório do código-fonte para esta página de demonstração está disponível aqui.
Você tem várias maneiras de baixar o código-fonte.

https://github.com/pixijs/examples

Desculpe,
Com licença. Isso não significa isso.

Não quero o código de demonstração em si.

Quando a janela é ampliada ou reduzida na página onde o código de demonstração PixiJS é implantado, a imagem do coelho dentro também é dimensionada na mesma proporção.
https://pixijs.io/examples/#/demos -basic / container.js

Isso não pode ser alcançado simplesmente implementando o código de demonstração.

Lamento que tenha sido difícil passar.

Como é apenas um truque de CSS , se você não tem certeza de como funciona, você também pode usar js e listener para hackear o css e ajustar a tela no evento de redimensionamento.
Eu fiz você um exemplo aqui para ajuste de escala automática à tela com proporção.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1 -JnwJ_0Y_m
Isso é ajuda?

Então é isso.

Eu costumava usar o módulo KonvaJS antes.
Ao alterar a escala do objeto Stage, consegui redimensionar a tela de forma relativa.

É impossível dimensionar e redimensionar a CANVAS com PixiJS? Ou não é importante?
Algumas imagens não são muito boas em confiar em CSS.

este artigo é outra abordagem e também pode ajudá-lo.
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Obrigada. Muito perto do ideal.

No entanto, assim como o exemplo que encontrei, o Canvas do PixiJS se espalha por todo o tamanho da tela.

Quero adicionar um componente PixiJS dentro de uma div e redimensioná-lo dentro.

Em outras palavras, como escrevi no início, em vez de espalhar a tela para preencher a tela, quero apresentá-la dentro de uma única div, como a página de demonstração PixiJS.
https://pixijs.io/examples/#/demos -basic / container.js

Como você pode ver, ele é dimensionado em alguma div da tela, não em toda a tela.

Além disso, o tamanho mínimo da tela é fixo, e acho que é uma tela muito boa.

Isso é ideal.

Obrigada.

Tudo bem, mas será necessário esperar para ver com um webMaster dev,
Não sou bom o suficiente no FrontEnd para te responder sobre isso e eu também meu inglês é bastante limitado.
Infelizmente, fiz o meu melhor e estou limitado pela barreira do idioma.

Você também pode ver a página de origem de demonstração usando Iframe para dividir, talvez você precise criar um DIV com suas regras CSS e colocar Iframe com id dentro e passar a nova id de tela para o aplicativo pixi.

Desculpe.

Em outras palavras, não desejo exibir a tela PixiJS em tela inteira.

Por exemplo, existe um div em HTML. Suponha que você coloque a tela PixiJS nele.
Suponha que o div seja 300 * 300 quando a janela é aberta em tela inteira.
Conforme a janela fica menor, ela será dimensionada com a proporção de 1: 1.

Certamente, a demonstração é implementada em um iframe.
Em vez disso, quero que isso funcione da mesma forma em uma div html normal.

Como uma demonstração, não como uma tela inteira, mas como parte da tela.

Obrigada.

Use flex.

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

O tamanho do canvas é sempre o mesmo, é redimensionado através de CSS, o navegador faz o dimensionamento

Caso você queira uma tela com proporção pixel a pixel - você terá que aprender tudo: css, transformações pixi, como redimensionar a tela pixi, o que a pixi faz quando você redimensiona a tela.

PixiJS está escalando por CSS em vez de pelo próprio PixiJS?

KonvaJS forneceu um método para dimensionar o Palco.

Eu gostaria de implementar o mesmo, se possível

PixiJS está escalando por CSS em vez de pelo próprio PixiJS?

Há escala de transformação de palco, redimensionamento de tela e parâmetros de largura / altura de css e opções de flex. Combine-os para fazer o escalonamento do aplicativo da maneira que você quiser.

KonvaJS forneceu um método para dimensionar o Palco.

PixiJS não é sobre redimensionar coisas, é sobre renderização. redimensionar é fácil. Eu entendo que as pessoas precisam disso para começar a fazer aplicativos rapidamente - bem, aqui está o exemplo do flex! Você quer mais? Você tem que aprender. Caso contrário, você ficará preso mais tarde com os mesmos problemas, mas em níveis diferentes. Sem o conhecimento das transformações, você não conseguirá posicionar seus elementos e girá-los em torno de pontos.

Outro problema é que ninguém fez um artigo sobre métodos de redimensionamento, ninguém! As pessoas perguntaram sobre isso, nós respondemos, mas nem um artigo sequer!

Você pode pesquisar https://www.html5gamedevs.com/forum/15-pixijs/ para tópicos sobre redimensionamento, há muitos.

Se você fizer um artigo, vou colocá-lo em nosso wiki: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Eu gostaria de implementar o mesmo, se possível

Transferir o componente de redimensionamento do Konva no PixiJS é uma boa ideia.

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

Eu tenho uma tela KonvaJS que pode fazer esse zoom e mover o palco arrastando.

Eu quero transferir isso para PixiJS.

No entanto, PixiJS sentiu que o objeto era complexo.

Alguém poderia escrever um código de exemplo?

você já olhou em https://github.com/davidfig/pixi-viewport ?

Eu quero usar PixiJS puro.
Eu também estava muito interessado no PixiJS V5 e decidi me mudar do KonvaJS.

Obrigada.

No entanto, é semelhante ao zoom e ao arrasto que você deseja obter.

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

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

Tenho trabalhado muito no PixiJS e tentando criar uma página que se comporte da mesma forma que a página que criei com o KonvaJS.

No entanto, ele não funciona corretamente.

PixiJS não deveria escalar o palco?

Recursos que desejo implementar.
・ O tamanho da tela é de cerca de 800 * 800.
· Primeiro leia a imagem e coloque-a na tela. No entanto, o tamanho da imagem varia de 8000 * 8000 a 6000 * 6000. (O quadrado é fixo.)
・ Depois de exibir a imagem exatamente no tamanho da tela, coloque um grande número de objetos Pixi como círculos e personagens no palco.
・ Desejo aumentar e diminuir o zoom com a roda do mouse.
・ Depois de aumentar o zoom, arraste a posição do palco arrastando. (Mas não sai do final do palco.)

Eu gostaria que você olhasse o código-fonte que foi realmente feito e desse conselhos.

OK, você me deu informações suficientes, vou dar uma olhada :)

window.addEventListener ('redimensionar', redimensionar);

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 canvas = document.getElementById ("canvas")

const app = new PIXI.CanvasRenderer ({

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

})

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

estágio var = novo PIXI.Container ();

Estou redimensionando usando os códigos acima. Sem problemas.

@dijitaletkinlikler
Eu não quero redimensionar.
Estou tentando implementar zoom e arrastar.

Obrigada.

Desculpe, seu exemplo me deu um pouco de ansiedade, porque muitas pessoas esperam por minha ajuda. Eu olhei o código por apenas 1 minuto, mas vi que você tem quase tudo o que é necessário, só precisa adicionar alguns exemplos de pixi de formulário de matemática e experiência.

Eu tenho esse código para mover quadrados: https://pixijs.io/examples/#/plugin -projection / basic.js, você pode fazer o mesmo com sua tela. Os problemas de dimensionamento podem ser resolvidos usando as funções toLocal / toGlobal .

Além disso, resolver esta tarefa deve ajudá-lo no futuro, as mesmas coisas aparecerão repetidamente quando você usar transformações e interação pixi.

Desculpe, você tem que esperar por outra pessoa para ajudar.

PS Pedi ao nosso pessoal para ajudar no caso de alguém estar livre

Achei o pixi-viewport uma biblioteca muito atraente e examinei-a.

A documentação diz que é para a v4, mas se você verificar o problema, parece funcionar bem na v5.

Portanto, usarei a janela de visualização pixi para realizar o ideal.

No entanto, se eu usá-lo mal, ou v5 e pixi-viewport não são compatíveis, ele não funciona corretamente.

Assim que isso for resolvido, irei anunciá-lo aqui.

Da mesma forma no futuro, quando alguém estiver com problemas.

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

Consegui resolver esse problema usando a janela de visualização pixi.

PixiJS tem uma comunidade bem desenvolvida e é muito complacente.

Eu acho essa biblioteca realmente ótima.

Muito obrigado.