Question

我想创建一个带有可拖动圆圈的画布。画布可以很好地满足我的需求。它可以缩放和平移，并且当画布的比例为1时，圆也可以很好地工作。但是，当您放大画布并尝试在圆上拖动时，圆会滞后并根据拖动的方向领先于光标。在拖动时缩放比鼠标移动快。向外扩展时，拖动速度比鼠标移动慢。这是我的拖动功能。

handleMouseMove = ({ clientX, clientY }) => {
        const { isDragging } = this.state
        const { onDrag, scale } = this.props

        if (!isDragging) {
            return
        }

        this.setState(
            (prevState) => ({
                translateX:
                    (clientX - prevState.originalX + prevState.lastTranslateX) / scale,
                translateY:
                    (clientY - prevState.originalY + prevState.lastTranslateY)  / scale,
            }),
            () => {
                if (onDrag) {
                    onDrag({
                        translateX: this.state.translateX,
                        translateY: this.state.translateY,
                    })
                }
            }
        )
    }

我将父级的比例作为支撑传递到圆上，并在平移状态下将其分割，但是并没有解决问题。但是，当scale = 1时，它可以很好地工作。如果您碰巧发现我做错了事，请提供帮助...谢谢。

Answer 1

抱歉，我发帖后才意识到答案。...刚改成这个。.

this.setState(
            (prevState) => ({
                translateX:
                    (clientX - prevState.originalX) / scale + prevState.lastTranslateX,
                translateY:
                    (clientY - prevState.originalY)  / scale + prevState.lastTranslateY,
            }),
            () => {
                if (onDrag) {
                    onDrag({
                        translateX: this.state.translateX,
                        translateY: this.state.translateY,
                    })
                }
            }
        )

缩放容器时，拖动效果不佳

1 个答案: