Pixi.js: デモのようなレスポンシブな画面を作りたい

このデモ ページのソース コードのリポジトリは、ここから入手できます。
ソース コードをダウンロードする方法は複数あります。

https://github.com/pixijs/examples

ごめんなさい、
すみません。 というわけではありません。

デモ コード自体は必要ありません。

PixiJSデモコードがデプロイされているページでウィンドウを拡大または縮小すると、内部のウサギの画像も同じ比率で拡大縮小されます。
https://pixijs.io/examples/#/demos -basic / container.js

これは、デモ コードを実装するだけでは実現できません。

行きづらかったようで申し訳ありません。

CSSトリックですが、どのように動作するかわからない場合は、js とリスナーを使用して CSS をハックし、サイズ変更イベントに画面を合わせることができます。
ここでは、比率を使用して画面に合わせて自動スケーリングする例を作成しました。
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 の Canvas は画面サイズ全体に広がっています。

div内にPixiJSコンポーネントを追加し、内部でサイズを変更したいと思います。

つまり、最初に書いたように画面いっぱいにキャンバスを広げるのではなく、PixiJSのデモページのように一つのdiv内で紹介したいのです。
https://pixijs.io/examples/#/demos -basic / container.js

ご覧のとおり、画面全体ではなく、画面の一部の div でスケーリングされます。

また、キャンバスの最小サイズも決まっており、とてもいい画面だと思います。

これは理想的です。

ありがとうございました。

それは問題ありませんが、webMaster 開発者と一緒に待つ必要があります。
私はこれについてあなたに答えるにはFrontEndが十分ではありません.
残念ながら最善を尽くしましたが、言語の壁に制限されています。

また、デモ ソース ページが Iframe を使用して分割することも確認できます。CSS ルールで DIV を作成し、ID を含む Iframe を内部に配置し、新しいキャンバス ID を pixi アプリに渡す必要があるかもしれません。

ごめんなさい。

つまり、PixiJSのキャンバスを全画面表示したくないのです。

たとえば、HTML には 1 つの 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は、ステージをスケーリングする方法を提供しました。

できれば同じように実装したい

PixiJS は PixiJS 自体ではなく CSS によってスケーリングされますか?

ステージ変換スケールがあり、キャンバスのサイズ変更があり、CSS の幅/高さのパラメーターとフレックス オプションがあります。 それらを組み合わせて、アプリを思い通りにスケーリングします。

KonvaJSは、ステージをスケーリングする方法を提供しました。

PixiJS は、サイズ変更についてではなく、レンダリングについてです。 リサイズは簡単です。 私は、人々がアプリを素早く作り始めるためにこれが必要であることを理解しています. あなたはもっと欲しい？ あなたは習う必要があります。 そうしないと、後で同じ問題で別のレベルで立ち往生することになります。 変換の知識がないと、要素を配置してポイントを中心に回転させることはできません。

もう 1 つの問題は、サイズ変更方法に関する記事を誰も作成していないことです。 人々はそれについて尋ね、私たちは答えましたが、それでも記事は 1 つもありません!

https://www.html5gamedevs.com/forum/15-pixijs/でサイズ変更に関するスレッドを検索できますが、たくさんあります。

あなたが記事を作ったら、私はそれを私たちのウィキに入れます： https ：

できれば同じように実装したい

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/

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

私は PixiJS に熱心に取り組んでおり、KonvaJS で作成したページと同じように動作するページを作成しようとしています。

ただし、正しく動作しません。

PixiJS はステージをスケールするべきではありませんか?

実装したい機能。
・キャンバスのサイズは約800×800です。
・まずは画像を読み込んでキャンバスに貼ります。 ただし、画像サイズは8000 * 8000から6000 * 6000まで変化します。（正方形は固定されています。）
・画像をキャンバスのサイズにぴったり表示した後、ステージ上に円やキャラクターなどのPixiオブジェクトを大量に配置します。
・マウスホイールでズームイン・ズームアウトしたい。
・ズームイン後、ステージ位置をドラッグでドラッグ。 (ただし、ステージの端の外には移動しません。)

実際に作ったソースコードを見てアドバイスをいただければと思います。

わかりました、あなたは私に十分な情報を与えてくれました、私はそれを見ていきます:)

window.addEventListener('リサイズ'、リサイズ);

リサイズ();
変数 w、h;
関数 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();

上記のコードを使用してサイズを変更しています。 問題ない。

@dijitaletkinlikler
サイズ直しはしたくありません。
ズームとドラッグを実装しようとしています。

ありがとうございました。

申し訳ありませんが、あなたの例には少し不安がありました。あまりにも多くの人が私の助けを待っているからです。 コードを1分だけ調べましたが、必要なものはほぼすべて揃っていることがわかりました。数学と経験をpixiの例から追加するだけです。

正方形を移動するコードがあります: https://pixijs.io/examples/#/plugin -projection/basic.js 、画面で同じことができます。 スケーリングの問題は、 toLocal / toGlobal関数を使用して解決できます。

また、このタスクを解決すると、将来、pixi 変換と相互作用を使用すると、同じことが何度も表示されます。

申し訳ありませんが、他の人が助けてくれるのを待つ必要があります。

PS私は、誰かが空いている場合に備えて、余裕を持ってスタッフに助けを求めました

pixi-viewport はとても魅力的なライブラリだと思い、調べてみました。

ドキュメントには v4 用であると書かれていますが、問題を確認すると、v5 で問題なく動作するようです。

そこで、pixi-viewportを使って理想を実現していきます。

ただ、使い方が悪いのか、v5とpixi-viewportに互換性がないのか、ちゃんと動かない。

解決したら、ここで発表します。

将来も同じように、誰かが困ったとき。

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

この問題は、pixi-viewport を使用することで解決できました。

PixiJSには十分に発達したコミュニティがあり、とても親切です。

このライブラリは本当に素晴らしいと思います。

どうもありがとうございました。