Ищете библиотеку событий холста по-настоящему кросс-платформу

Question

Я разрабатываю приложение HTML5, и я ищу некоторые элементы обработки JS-библиотеки на элементах холста, подходящих как для настольных, так и для мобильных платформ (в противном случае, в чем смысл html 5?)

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

Я знаю kinetic.js и подобное, но они, кажется, есть отдельные библиотеки для мобильных и настольных

Answer 1

Canvas не имеет элементов, и не круг что вы рисуете, например, на холсте какие-либо события, связанные с ним - это сильно отличается от работы в DOM.

Вам нужно отслеживать позиции x/y каждого из «элементов», которые вы нарисовываете на своем холсте, и когда происходит событие мыши или касание, принимайте позицию x/y этого события и сопоставьте его с положением x/y ваших элементов «canvas».

Однако, что вам нужно сделать, это немного базовое обнаружение столкновений, так что позиции x/y вашего ввода (мышь/касание) не должны совпадать точно с x/y позиции вашего элемента «холст».

Используя Kinetic, вы можете довольно легко обнаружить, когда находитесь на мобильном устройстве с поддержкой событий касания, а затем изменяете события «mousedown», «mouseup», «click» и т. Д. В Kinetic:

var _START, _MOVE, _END; 
if('ontouchstart' in window) { 
    _START = 'touchstart'; 
    _MOVE = 'touchmove'; 
    _END = 'touchend'; 
} 
else { 
    _START = 'mousedown'; 
    _MOVE = 'mousemove'; 
    _END = 'mouseup';   
} 

... а затем использовать _start/_MOVE/_END в функции addEventListener кинетическую в.

Надеюсь, что несколько помогает. Конечно, будьте осторожны, устанавливая глобальные переменные, это, как правило, плохая практика, и это только пример.

Kinetic here, и есть хорошая запись событий касания и жестов (жесты для щепотки/увеличения) here.