当光标快速移动时，使用 PIXI + React + ts 拖动无法正常工作

Question

我想像完成一样进行拖放这里

主要代码：

import {FC} from 'react'
import styles from './DrawPage.module.scss'
import {Stage} from "@pixi/react";
import Block from "./bench/Block";

const DrawPage: FC = () => {
    return (
        <div className={styles.draw} id='canvas'>
            <Stage options={{backgroundColor: 0xf8f8f8}} width={parent.innerWidth} height={parent.innerHeight}>
                <Block/>
            </Stage>
        </div>
    )
}

export default DrawPage

区块代码：

import {useRef, useState} from "react";
import {Sprite} from "@pixi/react";
import * as PIXI from "pixi.js";
import '@pixi/events'

const Block = () => {

    const isDragging = useRef(false);
    const offset = useRef({x: 0, y: 0});
    const [position, setPosition] = useState({x: 100, y: 100})
    const [alpha, setAlpha] = useState(1);

    const onStart = (e) => {
        isDragging.current = true;
        offset.current = {
            x: e.data.global.x - position.x,
            y: e.data.global.y - position.y
        };
        setAlpha(0.5);
    }

    const onEnd = (e) => {
        isDragging.current = false;
        setAlpha(1);
    }

    const onMove = (e) => {
        console.log("move")
        if (isDragging.current) {
            setPosition({
                x: e.data.global.x - offset.current.x,
                y: e.data.global.y - offset.current.y,
            })
        }
    }

    return (
        <Sprite
            eventMode={"dynamic"}
            position={position}
            pointerdown={onStart}
            pointerup={onEnd}
            pointerupoutside={onEnd}
            pointermove={onMove}
            //globalpointermove={onMove}
            globalmousemove={onMove}
            alpha={alpha}
            texture={PIXI.Texture.WHITE}
            tint={0x00ff00}
            width={200}
            height={200}
        />
    )
}

export default Block

package.json

"dependencies": {
    "@pixi/events": "^7.3.3",
    "@pixi/react": "^7.1.1",
    "classnames": "^2.5.1",
    "pixi.js": "^7.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.49.3",
    "react-router-dom": "^6.21.2",
    "yarn": "^1.22.21"
  }

当光标缓慢移动但

pointermove

停止调用块外的

onMove

函数时，它会起作用。

pointerup

活动正常进行。 在示例中，我将

console.log

添加到

onMove

函数中，无论光标移动到哪里，都会看到日志。 我尝试更改事件模式但没有结果。

文档

中的globalpointermove也不起作用。 如何解决这个问题？

也许我应该将 eventFeatures.globalMove 更改为 true，但我不知道默认值以及如何做到这一点

Answer 1

我想出了这个解决方案，但它看起来很脏

import {useCallback, useRef, useState} from "react";
import {Container, PixiComponent} from "@pixi/react";
import {Graphics} from "pixi.js";

interface RectangleProps {
    x: number;
    y: number;
}

const Block = (props: RectangleProps) => {

    const isDragging = useRef(false);
    const offset = useRef({x: 0, y: 0});
    const [position, setPosition] = useState({x: props.x, y: props.y})
    const [alpha, setAlpha] = useState(1);

    const onStart = (e) => {
        isDragging.current = true;
        offset.current = {
            x: e.data.global.x - position.x,
            y: e.data.global.y - position.y
        };
        setAlpha(0.5);
    }

    const onEnd = (e) => {
        isDragging.current = false;
        setAlpha(1);
    }

    const onMove = (e) => {
        if (isDragging.current) {
            setPosition({
                x: e.data.global.x - offset.current.x,
                y: e.data.global.y - offset.current.y,
            })
        }
    }

    const Rectangle = PixiComponent<any, Graphics>('Rectangle', {
        create: () => new Graphics(),
        applyProps: (ins: Graphics, _) => {
            ins.beginFill(0xffffff)
            ins.lineStyle(1, '0xAFAFAF')
            ins.drawRoundedRect(0, 0, 150, 150, 10)
            ins.endFill()
            ins.eventMode = "static"
            ins.on("globalpointermove", onMove)
        },
    })


    return (
        <Container
            eventMode={"static"}
            position={position}
            pointerdown={onStart}
            pointerup={onEnd}
            pointerupoutside={onEnd}
            alpha={alpha}
        >
            <Rectangle/>
        </Container>
    )
}

export default Block