Как стать автором
Обновить

Модные «жесты» jQuery

Время на прочтение 2 мин
Количество просмотров 3K
Автор оригинала: Anant Garg
Включите распознавание сложных жестов мышью (жесты могут описывать буквы, символы других алфавитов и иные символы, включая Ваши собственные знаки) на Вашем сайте!

Возможности
  1. Можно создавать свои собственные жесты;
  2. Можно иметь множество областей на странице, которые будут способны распознать жесты;
  3. Есть визуальная обратная связь;
  4. Работоспособность во всех основных браузерах.
Благодарности

Этот скрипт инициирован из скрипта распознавания жестов мыши от Didier Brun.

Демонстрация

Запустить демонстрацию распознавания жестов мыши

Скриншот модных жестов jQuery

скриншот

Требования

1. jQuery
2. Библиотека Walter Zorn’s VectorGraphics

Введение

Создайте новый файл html со следующим кодом. Функция возвратит данные, то есть распознанный символ или название:
<div id="sample" style="border:1px solid black;position:relative;height:150px;width:150px;"></div>

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancygestures.js"></script>

<script>

$(document).ready(function () {
  $('#sample').fancygestures(function (data) {
    alert(data);
  });
});

</script>

* This source code was highlighted with Source Code Highlighter.


Настройка

Пожалуйста, используйте ключ ниже, чтобы генерировать строку чисел для Вашего знака: например. L будет похожа на последовательность из движений 2 и 0. Следующие символы уже отображены в скрипте:
ключ и известные символы

Предположим, что Вы хотите добавить символ «CIRCLE» (круг) с последовательностью движений «432107654»; для этого нужно отредактировать jquery.fancygestures.js, добавив следующее после строки 7:
gestures["CIRCLE"] = "432107654";

* This source code was highlighted with Source Code Highlighter.


Вышеупомянутый код возвратит «CIRCLE» из функции, когда Вы проведете круг. Тем не менее, удостоверьтесь, что у Вас нет подобных наборов движений, так как в этом случае Вы получите непредсказуемые результаты, например, наличие одного и того же жеста для нуля и символа O.

Загрузить

Загрузите Fancy Gestures

Лицензия

Fancy Gestures лицензируются согласно лицензии MIT. Пожалуйста, напишите мне, если Вы нашли интересное применение данному скрипту.

Комментарии/Предложения?

Дайте мне знать о том, как мы можем улучшить этот код или напишите о любых новых возможностях, которые Вы хотели бы добавить в этот скрипт.
Теги:
Хабы:
+57
Комментарии 58
Комментарии Комментарии 58

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн