Question

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

到目前为止我做了什么：

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

因此，在点击图形元素时，画布会放大。但它不是我想要的，我似乎无法绕过有助于实现我想要的逻辑。

任何人对我应该采取的方法有任何想法吗？

Answer 1

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

关于你的问题。您需要知道要实现的大小（舞台大小），您想知道对象的大小（边界框），然后您可以计算您需要调整多少大小。这将是您刚刚硬编码的值1.25。

当对象具有另一个比率（宽度与高度）作为舞台时，您还必须考虑要执行的操作。切断，适合或伸展？这是惯用的方式。

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

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

祝你好运。

放大子元素PixiJS

1 个答案: