Математика смещения ограничительной рамки перетаскиванием

введите здесь описание изображения

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

При движении мыши я использую

xBall = xMouse;
yBall = yMouse;

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

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

Где я ошибаюсь?


canvas drag offset math
person Lars    schedule 21.06.2013    source источник
comment
Я ценю ваше жесткое кодирование для этой задачи, но нет необходимости изобретать велосипед, попробуйте использовать Kinetic.js, вы обязательно оцените, насколько эффективно кинетик справится с такими задачами.   -  person sumitb.mdi    schedule 21.06.2013

Ответы (1)


arrow_upward
2
arrow_downward

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

При нажатии мыши сохраните начальные координаты щелчка:

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

При движении мыши:

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

При поднятии мыши:

movingFlag = false;
person tafa    schedule 21.06.2013
comment
Да, большое спасибо, просто чтобы все было предельно ясно, xBall = xBallInitial + xMouse - xInitial и yBall = yBallInitial + yMouse - yInitial - person Lars; 21.06.2013