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 模块。
通过改变舞台对象的比例，我能够相对地调整画布的大小。

使用 PixiJS 无法缩放和调整 CANVAS 本身的大小吗？ 或者不是主要的？
有些图片不太擅长依赖CSS。

这篇文章是另一种方法，也可以帮助你。
https://medium.com/@michelfariarj/scale -a-pixi-js-game-to-fit-the-screen-1a32f8730e9c

谢谢你。 非常接近理想。

但是，就像我发现的示例一样，PixiJS 的 Canvas 遍布整个屏幕尺寸。

我想在 div 中添加一个 PixiJS 组件并在里面调整它的大小。

换句话说，正如我一开始写的那样，我想在单个 div 中引入它，例如 PixiJS 演示页面，而不是将画布展开以填充屏幕。
https://pixijs.io/examples/#/demos -basic/container.js

如您所见，它是在屏幕的某个 div 中缩放的，而不是整个屏幕。

另外，画布的最小尺寸是固定的，我认为这是一个非常漂亮的屏幕。

这是理想的。

谢谢你。

很好，但需要与网站管理员开发人员一起拭目以待，
我在FrontEnd中还不够好，无法回答有关此事，我的英语也相当有限。
不幸的是，我已尽力而为，但我受到语言障碍的限制。

您还可以看到演示源页面使用 iframe 进行拆分，您可能需要使用 CSS 规则创建一个 DIV 并将带有 id 的 iframe 放入其中并将新的画布 id 传递给 pixi 应用程序。

对不起。

换句话说，我不想在全屏上显示 PixiJS 画布。

例如，HTML 中有一个 div。 假设您将 PixiJS 画布放入其中。
假设窗口全屏打开时 div 为 300 * 300。
随着窗口变小，它将以1：1的比例缩放。

当然，demo 是在 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 是通过 CSS 缩放而不是通过 PixiJS 本身缩放吗？

KonvaJS 提供了一种缩放舞台的方法。

如果可能的话，我想实现相同的

PixiJS 是通过 CSS 缩放而不是通过 PixiJS 本身缩放吗？

有舞台变换比例，有画布调整大小，还有 css 宽度/高度参数和 flex 选项。 将它们组合起来，使应用程序以您想要的方式进行缩放。

KonvaJS 提供了一种缩放舞台的方法。

PixiJS 不是关于调整大小，而是关于渲染。 调整大小很容易。 我知道人们需要它来开始快速制作应用程序 - 好吧，这里是 flex 示例！ 你想要更多？ 你必须学习。 否则你以后会遇到同样的问题，但在不同的层面上。 如果不了解变换，您将无法定位元素并围绕点旋转它们。

还有一个问题是没有人发过关于resize方法的文章，没有人！ 人家问了，我们答了，还是没有一篇文章！

您可以在https://www.html5gamedevs.com/forum/15-pixijs/中搜索有关调整大小的主题，其中有很多。

如果你发表文章，我会把它放在我们的wiki： https :

如果可能的话，我想实现相同的

在PixiJS上移植Konva调整大小组件是一个好主意。

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 不等。（正方形是固定的。）
・ 将图像精确显示到画布大小后，在舞台上放置大量圆形和字符等 Pixi 对象。
・ 我想用鼠标滚轮放大和缩小。
・ 放大后，拖动舞台位置。 （但它不会移出阶段结束。）

我希望您查看实际制作的源代码并提供建议。

好的，你给了我足够的信息，我会看看:)

window.addEventListener('resize', resize);

调整大小（）；
var w,h;
函数调整大小（）{

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

我正在使用上述代码调整大小。 没问题。

@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社区发达，并且非常友好。

我觉得这个图书馆真的很棒。

非常感谢你。