javascript - 放大子元素 PixiJS

Question

我正在尝试使用 PIXI JS 创建一个界面，其中我有一个主 Canvas ，即舞台。之后，我在舞台上有了一个图形元素作为子元素。单击图形元素时，我希望能够放大该元素，使其填满 Canvas 的 80%。我的主要目标是拥有多个元素，单击每个元素时， Canvas 会放大，并且只有该元素可见。

到目前为止我做了什么:

    this.renderer = this.PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {
        transparent: true,
        anitalias: true
    });
    this.stage = new this.PIXI.Container();
    this.graphics = new this.PIXI.Graphics();
    this.graphics.beginFill(0x2F7455);
    this.graphics.drawRect(100, 100, 75, 50);
    this.graphics.endFill();
    this.graphics.interactive = true;
    this.graphics.click = function (){
        self.animate = true;
        self.grow();
        console.log("I WAS CLICKED");
    }
    this.stage.addChild(this.graphics);

    animation() {
        requestAnimationFrame(this.animation.bind(this));
        this.renderer.render(this.stage);
    }

    grow() {
        this.stage.pivot.x = this.graphics.width / 2;
        this.stage.pivot.y = this.graphics.height / 2;
        if (this.stage.scale.x < 20) {
            this.stage.scale.x = (this.stage.scale.x * 1.25).toFixed(1);
        }
        if (this.stage.scale.y < 20) {
            this.stage.scale.y = (this.stage.scale.y * 1.25).toFixed(1);
        }
    }

因此，单击图形元素时， Canvas 会放大。但这不是我想要的，而且我似乎无法理解可以帮助我实现我想要的逻辑。

有人对我应该采取的方法有什么想法吗？

Answer 1

当询问类似这样的特殊问题时，您应该始终在 plnkr.co 或 codepen 上创建演示，以便观众可以快速尝试您到目前为止所做的事情。这将降低人们帮助您的障碍。

关于你的问题。您需要知道要达到的尺寸(舞台尺寸)，您想知道对象的尺寸(边界框)，然后您可以计算需要调整大小的量。这将是您刚刚硬编码的值 1.25。

您还必须考虑当对象具有另一个比例(宽度与高度)作为舞台时您想要做什么。剪断、贴合还是拉伸(stretch)？这是惯用的方式。

我还建议您仔细阅读 pixi camera js library 的来源。您很快就会注意到我使用了矩阵乘法。

不要让这让你害怕，而是鼓励你学习新东西。矩阵计算是这里非常灵活的关键，并且在许多其他编程领域都很有用。

祝你好运。