Обработчики событий PIXI.js не работают, спрайты слишком малы - PullRequest
Новая
       22

Обработчики событий PIXI.js не работают, спрайты слишком малы

0 голосов
/ 28 марта 2019

Я создаю интерактивное приложение с pixi.js.

В этом приложении у меня есть несколько спрайтов, которые я хочу перетаскивать.

Я создал эти спрайты, расширивКласс Sprite и добавление некоторой дополнительной логики в конструктор следующим образом: 

export class Tangible extends Sprite {
/**
 * Base Class for all tangibles
 */
constructor(texture, id) {
    super(texture);
    this.id = id;

    this.scale.set(0.1);

    // enable the tangible to be interactive... this will allow it to respond to mouse and touch events
    this.interactive = true;

    // this button mode will mean the hand cursor appears when you roll over the tangible with your mouse
    this.buttonMode = true;

    // center the tangible's anchor point
    this.anchor.set(0.5, 0.5);

    // setup events for mouse + touch using
    // the pointer events
    this
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointerover', onPointerOver)
        .on('pointerout', onPointerOut)
        .on('pointermove', onDragMove);

}

getId() {
    return this.id;
}

drawBounds() {
    console.log("entered drawBounds()");
    let bounds = this._bounds.getRectangle();
    let boundsArea = new Graphics();
    boundsArea.beginFill(0xffffff);
    boundsArea.lineStyle(4, 0xffffff, 1);
    boundsArea.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
    boundsArea.endFill();
    this.parent.addChild(boundsArea);
}

}

onDragStart, onDragEnd и onDragMove - методы, определенные вне класса и соответствующие приведенному здесь коду:

https://pixijs.io/examples/#/demos/dragging.js

onPointerOver и onPointerOut - это методы отладки, которые я добавил, которые просто содержат console.logs, чтобы сообщить мне, работают ли они (не работают).

Каждый из этих спрайтов хранитсяв следующем классе контейнера во время основной установки: 

export class Drawer extends Container { 
/**
 * Constructs a new Drawer object, for holding tangibles.
 * @param init_x The initial x position of the drawer area on the canvas
 * @param init_y The initial y position of the drawer area on the canvas
 * @param init_w The initial width of the drawer area.
 * @param init_h The initial height of the drawer area.
 *
 * @param open_x The x position of the drawer when it's open.
 * @param closed_x The x position of the drawer when it's closed.
 */
constructor(init_x, init_y, init_w, init_h, open_x, closed_x, capacity) {
    super();
    this.x = init_x, this.y = init_y, this.w = init_w, this.h = init_h;
    this.drawerArea = this.createDrawerArea(0, 0, init_w, init_h);
    this.addChild(this.drawerArea);

    this.interactive = true;

    this.open_x = open_x;
    this.closed_x = closed_x;

    this.num_tangibles = capacity;
    this.tangibles = {};

    this.closeDrawer();
}

addTangible(tangible) {
    let tId = tangible.getId();
    let hPad = 100;
    if(!(tId in this.tangibles) || (this.tangibles[tId] == null)) {
        this.tangibles[tId] = tangible;
        tangible.x = hPad + tangible.width + (this.width - (2 * hPad)) * (tId / (this.num_tangibles - 1)); // const is left padding
        console.log('tw: ' + tangible.width + ' ts: ' + tangible.scale);
        tangible.y = this.height * 0.5;
        console.log('tangible.x: ' + tangible.x + 'tangible.y: ' + tangible.y);
        this.addChild(tangible);
    } else {
        // some logic that places it somewhere else
    }
}

removeTangible(tangible) {
    let tId = tangible.getId();
    if((tId in this.tangibles) && (this.tangibles[tId] != null)) {
        this.tangibles[tangible.getId()] = null;
        // remove piece from drawer and close drawer
    } else {
        // throw an error? This should basically never happen
    }
}

openDrawer() {
    console.log("open_x: " + this.open_x);
    // this.drawerArea.x = this.open_x;
    this.x = this.open_x;
    for(var key in this.tangibles){
        this.tangibles[key].drawBounds();
    }
}

closeDrawer() {
    // this.drawerArea.x = this.closed_x;
    this.x = this.closed_x;
}

createDrawerArea(x, y, w, h) {
    // Create area outline
    let drawerArea = new Graphics();
    drawerArea.beginFill(0x68a2ff);
    drawerArea.lineStyle(4, 0xcccccc, 1);
    drawerArea.drawRect(x, y, w, h);
    drawerArea.endFill();
    return drawerArea;
}
}

Каждый из обработчиков / функций событий имеет операторы console.log, чтобы сообщить мне, когда они действительно ударились.

onDragMoveвызывается в любое время, когда курсор перемещается, независимо от того, находится ли курсор над одним из этих спрайтов или даже над пиксельным холстом.

Я вижу, что когда я нажимаю, а затем поднимаю (щелкаю или перетаскиваю мышью) один из спрайтов, вызывается onDragEnd.

onDragStart никогда не вызывается.

В попытке отладки я добавил метод рисования границ каждого спрайта и вижу, что по какой-то причине границы чрезвычайно малы по сравнению со спрайтами.Это кажется мне очень странным, и я не знаю, почему это так.

Некоторая другая информация, которая может оказаться полезной - Контейнеры, содержащие спрайты, перемещаются на холст, активируемый нажатием кнопок.,Когда это происходит, я перемещаю весь контейнер, и спрайты перемещаются вместе с ним, как и ожидалось.

    $("#some-drawer").on('click', function() {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
        gmCanvas.someDrawer.closeDrawer();
    } else {
        $(this).addClass('active');
        gmCanvas.someDrawer.openDrawer();
    }
});

Любая помощь очень ценится, на самом деле застрял на этом.Спасибо!

...