Привет всем. Представим, у вас есть сайт и для мобильной версии вы хотите сделать такую фитчу, чтобы вы рисовали какой-либо символ пальцем по дисплею смартфона и что-то выполнялось. Например, рисуем букву Z и появляется окно с информацией как на гифке:
Данная библиотека решает эту проблему. В ней вы можете создавать и добавлять несколько символов одновременно и она будет считывать их все. Делается это очень просто. Сейчас я вам подробно объясню как сделать это и ваш сайт будет работать с очень удобной и интересной функцией.
Очень быстро установить
Всё очень просто, подключаем библиотеку и создаём объект Recognize.
<script src="https://gaidadei.ru/recosigns/recosigns.js"></script> <!--подключили библиотеку-->
<script>
var touch = new Recognize(["sign1.png", "sign2.png"], window, function(n) { //создали объект Recognize
alert("sign is "+n);
});
</script> Это всё!!! Теперь ваша библиотека распознаёт символы на вашем сайте. Но подождите, скажите вы мне. Ведь я создал объект Recognize и указал в его конструкторе три аргумента. Это да, и сейчас я вам объясню про каждый из них. Первый аргумент, это массив с ссылками на картинки, которые являются шаблонами для наших знаков. Что такое шаблоны и как их создать я напишу ниже отдельно. А пока что про последние два аргумента. Второй аргумент, это DOM элемент по которому вы будете водить пальцем, например я указал window, что значит весь экран, но вы можете указать любой элемент по его id например document.getElementById("identificator"). Третий аргумент это функция, которая будет выполняться при распознавании одного из шаблонов. В неё будет возвращаться индекс распознанного шаблона в соответствии с массивом указанным в первом аргументе.
Шаблоны знаков
Шаблон это просто картинка png формата, которая задаёт символы, которые будут распознаны вашим смартфоном. Размер её не особо важен, хотя чем больше размер, тем более точно библиотека распознаёт символы, хотя данный эффект слабо заметен. Я лично предпочитаю размеры 500x500 пикселей. Самое оптимальное с моей точки зрения в равновесии веса картинки и точности распознавания. Картинка должна быть полностью заполнена белым цветом на заднем фоне (#ffffff, rgb(255, 255, 255)). Два круга: красный указывает начало рисунка и синий указывает конец рисунка. Эти два круга должны быть поверх всего на картинке. Красный должен быть строго красным (#ff0000, rgb(255, 0, 0)). Синий должен быть строго синим (#0000ff, rgb(0, 0, 255)). Чёрная линия (#000000, rgb(0, 0, 0)) указывает сам рисунок. В принципе это все. Вы можете в фотошопе нарисовать или скачать из ДЕМО ВЕРСИИ это очень просто.
Заключение
Вот так просто вы можете создавать очень необычную функцию для вашей мобильной версии телефона. Например, можно создать меню на сайте с помощью таких рисунков, будет переходить по ссылкам. Если хотите увидеть статью как создать меню с помощью таких символов, пишите в комментариях, или вообще если что-то хотите с этой библиотекой пишите я могу написать статью новую. В итоге мы получаем, что просто в фотошопе или пеинте рисуем такие вот шаблоны и у вас уже есть такой прикол на сайте. Спасибо за внимание.
