Pixi.js: I want to make a responsive screen like a demo

the repo of source code for this demo page are available here.
You have multiple way to download source code.

https://github.com/pixijs/examples

Sorry,
Excuse me. That doesn't mean that.

I don't want the demo code itself.

When the window is enlarged or reduced on the page where the PixiJS demo code is deployed, the image of the rabbit inside is also scaled by the same ratio.
https://pixijs.io/examples/#/demos-basic/container.js

This cannot be achieved simply by implementing the demo code.

I'm sorry that it was hard to get through.

ho it just a CSS tricks, if your not sure how it work, you can also use js and listener to hack the css and fit screen on resize event.
I made you example here for auto-scale fit to screen with ratio.
https://www.pixiplayground.com/#/edit/1vNMaYhaqi1-JnwJ_0Y_m
Is this help ?

So that's it.

I used to use KonvaJS module before.
By changing the scale of the Stage object, I was able to resize the canvas relatively.

Is it impossible to scale and resize CANVAS itself with PixiJS? Or isn't it major?
Some images are not very good at relying on CSS.

this article are another approach and can also help you.
https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

Thank you. Very close to the ideal.

However, just like the sample I found, the Canvas of PixiJS spreads across the entire screen size.

I want to add a PixiJS component inside a div and resize it inside.

In other words, as I wrote at the beginning, instead of spreading the canvas to fill the screen, I want to introduce it inside a single div, such as the PixiJS demo page.
https://pixijs.io/examples/#/demos-basic/container.js

As you can see, it is scaled in some div of the screen, not the whole screen.

Also, the minimum size of canvas is fixed, and I think it is a very nice screen.

This is ideal.

Thank you.

It fine, but will be necessary to wait and see with a webMaster dev,
I am not enough good in FrontEnd to answer you about this and me too my English is rather limited.
I did my best unfortunately and I am limited by the language barrier.

You can also see the demo source page use Iframe to split, you will maybe need create a DIV with your CSS rules and put Iframe with id inside and pass the new canvas id to pixi app.

sorry.

In other words, I do not want to display the PixiJS canvas on the full screen.

For example, there is one div in HTML. Suppose you put the PixiJS canvas in it.
Suppose the div is 300 * 300 when the window is opened full screen.
As the window gets smaller, it will be scaled with the 1: 1 ratio.

Certainly, the demo is implemented in an iframe.
Instead, I want this to work the same in a normal html div.

Like a demo, not as a full screen, but as part of the screen.

Thank you.

Use flex.

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

Canvas size is always the same, its resized through CSS, browser does the scaling.

In case you want canvas with pixel-to-pixel ratio - you'll have to learn everything: css, pixi transforms, how to resize pixi canvas, what pixi does when you resize canvas.

Is PixiJS scaling by CSS rather than by PixiJS itself?

KonvaJS provided a method to scale the Stage.

I would like to implement the same if possible

Is PixiJS scaling by CSS rather than by PixiJS itself?

There's stage transform scale, there's canvas resize, and there are css width/height params and flex options. Combine them to make the app scaling the way you want.

KonvaJS provided a method to scale the Stage.

PixiJS is not about resizing stuff, its about rendering. resizing is easy. I understand that people need this to start making apps fast - well, here's flex example! You want more? You have to learn. Otherwise you'll be stuck later with same problems but on different level. Without knowledge of transforms you wont be able to position your elements and rotate them around points.

Another problem is that no one made an article about resizing methods, no one! People asked about it, we answered, but still not a single article!

You can search https://www.html5gamedevs.com/forum/15-pixijs/ for threads about resizing, there are many.

If you make an article, i will put it in our wiki: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

I would like to implement the same if possible

Porting Konva resizing component on PixiJS is a good idea.

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

I have a KonvaJS screen that can make such a zoom and move the stage by dragging.

I want to transfer this to PixiJS.

However, PixiJS felt that the object was complex.

Could anyone please write a sample code?

have you looked at https://github.com/davidfig/pixi-viewport ?

I want to use pure PixiJS.
I was also very interested in PixiJS V5 and decided to move from KonvaJS.

Thank you.

However, it is similar to the zoom and drag you want to achieve.

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

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

I've been working hard on PixiJS and trying to create a page that behaves the same as the page I created with KonvaJS.

However, it does not work properly.

Shouldn't PixiJS scale the stage?

Features I want to implement.
・ The size of canvas is about 800 * 800.
・ First read the image and put it on canvas. However, the image size varies from 8000 * 8000 to 6000 * 6000. (The square is fixed.)
・ After displaying the image exactly to the size of the canvas, place a large number of Pixi objects such as circles and characters on the stage.
・ I want to zoom in and out with the mouse wheel.
・ After zooming in, drag the stage position by dragging. (But it does not move outside the end of the stage.)

I would like you to look at the source code that was actually made and give advice.

OK, you gave me enough information, I'll look at it :)

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 canvas =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();

I'm resizing using the above codes. No problem.

@dijitaletkinlikler
I do not want to resize.
I'm trying to implement zoom and drag.

Thank you.

Sorry, your example gave me a bit of anxiety, because too many people wait for my help. I looked through the code just 1 minute but I saw that you almost have everything needed , just need to add some math and experience form pixi examples.

I have that code to move squares around: https://pixijs.io/examples/#/plugin-projection/basic.js , you can do the same with your screen. Scaling problems can be resolved with using toLocal/toGlobal functions.

Also solving this task should help you in future, same things will appear over and over again when you use pixi transforms and interaction.

Sorry, you have to wait for someone else to help.

P.S. I asked our guys in slack to help in case someone is free

I found pixi-viewport a very attractive library and looked into it.

The documentation says it's for v4, but if you check the issue, it seems to work fine on v5.

Therefore, I will use pixi-viewport to realize the ideal.

However, whether I use it badly, or v5 and pixi-viewport are not compatible, it does not work properly.

Once this is resolved, I'll announce it here.

In the same way in the future, when someone is in trouble.

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

I was able to solve this problem by using pixi-viewport.

PixiJS has a well-developed community and is very accommodating.

I think this library is really great.

Thank you very much.