Можете ли вы использовать GSAP Draggable с PIXI.Graphics? - PullRequest
Новая
       35

Можете ли вы использовать GSAP Draggable с PIXI.Graphics?

0 голосов
/ 25 сентября 2019

Я создаю круг с PIXI.Graphics, а затем пытаюсь использовать Draggable, чтобы переместить круг по оси X.Я получаю сообщение об ошибке:

Uncaught Невозможно анимировать пустую цель.

Я установил для интерактивного свойства графического объекта значение true ...

Это потому, что Draggable не работает с PIXI.Graphics или я допустил еще одну ошибку?

Вот код, в котором я создаю графический объект в классе, расширяющем PIXI.Graphics:

export default class BlueDot extends PIXI.Graphics {
constructor(x, y) {
    super()
    this._init()
    this.x = x
    this.y = y
    this.interactive = true;
    this.buttonMode = true;
    this.dragDot();


}
_init() {
    this.lineStyle(0)
    this.pivot.set(this.x, this.y)
    this.beginFill(0x55f, 1)
    this.drawCircle(this.x, this.y, 20)
    this.endFill()
    this.hitArea = new PIXI.Circle(this.x, this.y, 20)
}
dragDot() {
  Draggable.create(this, {
      type: 'x, y',
  })
}

Затем я добавляю экземпляр этого класса в другой класс.

1 Ответ

0 голосов
/ 27 сентября 2019

Кристианзанев был прав, Draggable работает только с объектами DOM.Поэтому можно либо обернуть свой объект Pixi в объект DOM и перетащить его вокруг, либо использовать прокси-объект.

Чтобы использовать прокси-сервер, вы можете создать его следующим образом: 

var proxy = document.createElement("div");

var draggable = new Draggable(proxy, {
  trigger: canvas,
  bounds: canvas,
  cursor: "inherit",
  throwProps: true,
  onPress: pressAction,
  onDrag: moveAction,
  onThrowUpdate: moveAction
}).disable();

А затем нажмите, переместите и сгенерируйте обновление, чтобы обновить объект Pixi. Демо .

Дополнительную информацию можно найти в теме форума GreenSock на ту же тему.

...