Перетащите ограничительную рамку компенсирована математика

Question

Я создаю свое собственное перетаскивание с помощью холста. Чтобы выбрать мяч, я создал вокруг него невидимую ограничительную рамку. Щелчок в этой области позволит вам перетащить мяч.

На ходу мыши, я использую

xBall = xMouse; 
yBall = yMouse; 

Так мяч будет следовать за мышью. Это здорово, за исключением самого начала перетаскивания, центр мяча прыгнет туда, где мышь не нужна. Поэтому мне нужно учитывать смещение между Mouse и Ball.

Может ли кто-нибудь объяснить математику позади этого? Из моих рассуждений мне нужно добавить смещение к позиции мыши. Поэтому я получаю xBall = xMouse + (xBall - xMouse), но, как вы можете видеть, это просто заканчивается тем, что дает мне xBall = xBall, который бесполезен.

Куда я иду не так?

Answer 1

Вам необходимо определить, где был начальный клик, и провести расчет смещения относительно этих начальных координат.

На левой кнопки мыши, сохранить первоначальные Clicked координаты:

xInitial = xMouse; 
yInitial = yMouse; 
movingFlag = true; 

На ходу мыши:

if (movingFlag) { 
    xBall = xBall + xMouse - xInitial; 
    yBall = yBall + yMouse - yInitial; 
} 

На мыши вверх:

movingFlag = false;