Проблема с перетаскиванием ES5 Canvas при наведении курсора мыши

#canvas #drag-and-drop #drag #ecmascript-5 #mousedown

#холст #перетаскивание #ecmascript-5 #наведение курсора мыши

Вопрос:

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

spArray [1] — это спрайт canvas, который я пытаюсь перетащить. clickedBoundingBox работает правильно.

 function canvasMouseDownHandler(ev,ctx,spArray){

   if (spArray[1].clickedBoundingBox(ev)){
       console.log("Mousedown successful");

       var mx = ev.offsetX; 
       var my = ev.offsetY;

       spArray[1].x = Math.round(mx-spArray[1].width/2);
       spArray[1].y = Math.round(my-spArray[1].height/2);

}
  

В настоящее время происходит то, что он мгновенно привязывается к положению мыши и не поддерживает перетаскивание. Через журнал консоли я ожидал увидеть повторное протоколирование «наведение курсора мыши выполнено успешно»

Я думал об использовании функции setInterval для привязки спрайта к положению мыши, но затем я столкнулся с проблемой очистки интервала при наведении курсора мыши. Я довольно новичок в событиях, и я изо всех сил пытаюсь это понять.

Любая помощь приветствуется.

Ответ №1:

Если я правильно понял, вы ожидаете, что MouseDownHandler будет срабатывать при перемещении мыши, я не знаю ни одного языка, который ведет себя таким образом…

  • Наведение курсора мыши должно быть одноразовым событием при каждом нажатии кнопки мыши
  • точно так же, как наведение курсора мыши происходит один раз, когда отпущена кнопка мыши.
  • Должно быть перемещение мыши, которое запускается намного чаще.

С помощью этой информации вы можете заставить перетаскивание работать.
Перетаскивание — это каждое перемещение, которое происходит между наведением курсора мыши и наведением курсора мыши