在Next.js中使用React Pixi创建可拖拽Sprite遇API废弃问题求助

关于Deprecation警告的说明 #

PixiJS Deprecation Warning: renderer.plugins.interaction has been deprecated, use renderer.events 这个警告是因为PixiJS v7+将交互系统从renderer.plugins.interaction迁移到了renderer.events。解决方式：

• 升级@pixi/react到最新版本，新版本已经适配了PixiJS v7的新API，会自动消除这个警告
• 若暂时无法升级，该警告仅为API废弃提示，不影响功能正常运行

可拖拽Sprite的正确实现（适配PixiJS v7+） #

你原代码直接修改Sprite实例的属性不符合React数据驱动的设计模式，以下是重构后的代码，同时适配PixiJS v7的交互API：

"use client";

import { Sprite, Stage } from "@pixi/react";
import { useRef, useState } from "react";

export const DraggableSprite = () => {
  const [position, setPosition] = useState({ x: 100, y: 100 });
  const spriteRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });

  const handlePointerDown = (event) => {
    if (!spriteRef.current) return;
    setIsDragging(true);
    // 记录鼠标点击位置相对于Sprite中心的偏移
    const globalPos = event.data.global;
    const spritePos = spriteRef.current.getGlobalPosition();
    setDragOffset({
      x: globalPos.x - spritePos.x,
      y: globalPos.y - spritePos.y
    });
    // 改变透明度反馈
    spriteRef.current.alpha = 0.5;
  };

  const handlePointerUp = () => {
    if (!spriteRef.current) return;
    setIsDragging(false);
    spriteRef.current.alpha = 1;
  };

  const handlePointerMove = (event) => {
    if (!isDragging || !spriteRef.current) return;
    const globalPos = event.data.global;
    // 根据偏移计算新位置
    setPosition({
      x: globalPos.x - dragOffset.x,
      y: globalPos.y - dragOffset.y
    });
  };

  return (
    <div>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Sprite
          ref={spriteRef}
          image="https://pixijs.com/assets/bunny.png"
          anchor={0.5}
          x={position.x}
          y={position.y}
          pointerdown={handlePointerDown}
          pointerup={handlePointerUp}
          pointerupoutside={handlePointerUp}
          pointermove={handlePointerMove}
        />
      </Stage>
    </div>
  );
};

关键改进点 #

• 使用React的useState管理Sprite的位置和拖拽状态，符合数据驱动原则
• 通过useRef获取Sprite实例，避免直接修改组件属性
• 记录鼠标点击时的偏移量，防止拖拽时Sprite跳转到鼠标位置
• 使用PixiJS v7兼容的event.data.global获取全局坐标，替代旧的getLocalPosition用法

内容的提问来源于stack exchange，提问作者H Lynn