PIXI.Graphics 可以使用 GSAP Draggable 吗？

Question

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

Uncaught Cannot tween a null target.

我已将图形对象的交互属性设置为 true...

这是因为 Draggable 不适用于 PIXI.Graphics 还是我又犯了一个错误？

这是我在 class 扩展 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',
  })
}

然后我在另一个 class 中添加这个 class 的一个实例。

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。

PIXI.Graphics 可以使用 GSAP Draggable 吗？

Can You Use GSAP Draggable with PIXI.Graphics?

draggable

gsap

pixi.js