您可以在PIXI.Graphics中使用可拖动的GSAP吗？

Question

我正在使用PIXI.Graphics创建一个圆，然后尝试使用Draggable在X轴上移动该圆。我得到的错误是：

未捕获的无法在空目标之间进行补间。

我已将图形对象的交互属性设置为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',
  })
}

然后在另一个类中添加该类的实例。

Answer 1

kristianzanev是正确的，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对象。 Demo。

有关更多信息，请查看同一主题的GreenSock forum thread。