Добавление дочернего элемента в спрайт pixi.js искажает размеры и местоположение дочерних элементов.

Question

Я использую typcript & pixi.js v4.8.2.Вот код, который помогает мне создавать все контейнеры.

    let appWidth = app.renderer.view.width
    let appHeight = app.renderer.view.height
    mapContainer = new PIXI.Sprite(PIXI.loader.resources.water_pattern.texture);
    mapContainer.height = app.renderer.view.height
    mapContainer.width = appWidth - appWidth / 5 - appWidth / 14
    mapContainer.x = app.renderer.view.width / 14

    cardContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
    cardContainer.tint = 0x3C2415;
    cardContainer.height = app.renderer.view.height / 2
    cardContainer.width = app.renderer.view.width / 14

    actionContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
    actionContainer.tint = 0x00FF00;
    actionContainer.height = app.renderer.view.height / 2
    actionContainer.width = app.renderer.view.width / 14
    actionContainer.y = app.renderer.view.height / 2

    chatContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
    chatContainer.tint = 0x008080;
    chatContainer.height = app.renderer.view.height / 2
    chatContainer.width = app.renderer.view.width / 5
    chatContainer.x = app.renderer.view.width * 4 / 5

    playerContainer = new PIXI.Sprite(PIXI.Texture.WHITE);
    playerContainer.tint = 0xCCCCCC;
    playerContainer.height = app.renderer.view.height / 2
    playerContainer.width = app.renderer.view.width / 5
    playerContainer.y = app.renderer.view.height / 2
    playerContainer.x = app.renderer.view.width * 4 / 5

    app.stage.addChild(mapContainer, cardContainer, actionContainer, chatContainer, playerContainer)

Затем я пытаюсь создать спрайты в контейнерах:

    let settlement = new PIXI.Sprite(PIXI.loader.resources.settlement_red.texture)
    settlement.height = 10
    settlement.width = 10
    settlement.x = 0
    settlement.y = 0
    chatContainer.addChild(settlement)

, и результат моего кода такой:

В доме явно нет х и у.И это явно не от 10 до 10 пикселей.Почему это происходит?Как я могу это решить?

Обратите внимание, что я знаю, что могу использовать PIXI.Container , но я буду добавлять фоновые изображения.Я считаю, что лучше, когда фоновое изображение является частью контейнера, а не отдельным объектом внутри контейнера, поэтому я использую спрайты.

И, наконец, код моего приложения:

    app = new PIXI.Application({ // http://pixijs.download/release/docs/PIXI.Application.html
            antialias: true,    // default: false
            forceCanvas: true, // default: false (forces canvas rendering instead of webgl rendering)
        }
    );
    app.renderer.autoResize = true;
    app.renderer.view.style.position = "absolute";
    app.renderer.view.style.display = "block";
    app.renderer.autoResize = true;
    app.renderer.resize(window.innerWidth, window.innerHeight);
    document.body.appendChild(app.view);

Answer 1

Ответ был опубликован Ivon на этом форуме .

Это серьезная проблема, которая существует все время PixiJS, она даже предшествует pixi, она существует во Flash!

Вопрос в следующем:

1. реквизиты ширины и высоты - зло.Они не первоклассные граждане.https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#width-and-height-are-evil

2. поведение не может быть изменено из-за совместимости со вспышкой.https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L570

Смотрите здесь: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L373.Расширьте класс Sprite, переопределите метод getLocalBounds так, чтобы он игнорировал дочерние элементы, оставьте только код внутри этого «if».

Я решил свою проблему следующим образом;вместо использования PIXI.Sprite, я использовал PIXI.Container

export class ViewContainer extends PIXI.Container {
    bg: PIXI.Sprite

    constructor(x: number, y: number, w: number, h: number, color: number, container: Container) {
        // as we're extending a class, we need to call the inherited classes constructor first
        super()
        this.x = x
        this.y = y
        this.bg = new PIXI.Sprite(PIXI.Texture.WHITE)
        this.bg.tint = color
        this.bg.width = w
        this.bg.height = h
        this.addChild(this.bg)
        container.addChild(this)
    }

    addBorder() {
        let border = new PIXI.Graphics();
        border.lineStyle(.1,0xFFFFFF,1);
        border.drawRect(0,0,10,10);
        border.endFill();
        this.bg.addChild(border)
    }
}

Затем я создал контейнеры с этим кодом

function createContainers() {
    let appW = app.renderer.view.width
    let appH = app.renderer.view.height

    cardContainer = new ViewContainer(0, appH*10/11, appW*2/5, appH/11, 0x3C2415, app.stage)
    actionContainer = new ViewContainer(appW*2/5, appH*10/11, appW*2/5, appH/11, 0x00FF00, app.stage)
    chatContainer = new ViewContainer(appW*4/5, 0, appW/5, appH/2, 0x008080, app.stage)
    playerContainer = new ViewContainer(appW*4/5, appH/2, appW/5, appH/2, 0xCCCCCC, app.stage)
    mapContainer = new ViewContainer(0, 0, appW - appW/5, appH*10/11, 0x0000FF, app.stage)
}

Теперь я могу расположить все объекты какхочу с таким кодом:

let settlement = new PIXI.Sprite(PIXI.loader.resources.settlement_red.texture)
settlement.height = 10
settlement.width = 10
settlement.x = 0
settlement.y = 0
chatContainer.addChild(settlement)