С быстрым развитием компьютерных и сетевых технологий технология онлайн-подписи все чаще используется в безбумажных офисах. Эта интуитивно понятная и удобная операция может не только значительно повысить эффективность работы офиса, но также использовать методы цифрового хранения, чтобы избежать традиционных проблем, таких как трудности с хранением и извлечением. бумажные подписи. В нашей повседневной жизни уже существует множество сценариев, в которых используется технология онлайн-подписи, например: подпись POS-автомата, подпись экспресс-доставки, деловая подпись банка или государственного учреждения и т. д. В последнее время я работаю над потребностями компании в сфере бизнес-обработки, которая также включает в себя онлайн-подписи. Для ее реализации мы используем технологию Canvas. Далее давайте поговорим о том, как использовать Canvas для реализации онлайн-подписей!
Что такое холст?Canvas — это новый элемент HTML5, используемый для рисования графики на веб-страницах. Он был представлен Apple в веб-браузере Safari 1.3. Причина расширения HTML заключается в том, что возможности рисования HTML в Safari можно использовать в Mac OS X. Desktop, и Apple также хотела найти способ поддержки скриптовой графики в Dashboard. Два браузера, Firefox 1.5 и Opera 9, также последовали примеру Safari и начали поддерживать Canvas.
Тег Canvas — одно из величайших улучшений в HTML5, поскольку он позволяет нам реализовывать графический дизайн веб-страниц без использования изображений. Это похоже на холст. Он не имеет возможностей рисования, но отображает API рисования для клиентского JavaScript. Благодаря поддержке JavaScript мы можем использовать его в рамках холста для достижения желаемого эффекта.
Выбор технологииЭту функцию можно реализовать в Canvas, SVG или Flash, но почему мы выбрали Canvas?
Прежде всего, поскольку нам нужна функциональная поддержка мобильных платформ, мы можем напрямую отказаться от Flash. У него нет дружественной поддержки на мобильной стороне, но Canvas и SVG обладают хорошими кроссплатформенными возможностями. Как нам сделать выбор?
У обоих есть свои области специализации. Исходя из вышеизложенного, мы выбрали Canvas для реализации функции подписи.
Далее давайте посмотрим на эффект реализации.
После понимания источника Canvas, выбора технологии и окончательного эффекта рендеринга, мы напишем пять частей: создание, рисование, мониторинг, перерисовка и обработка изображений. Давайте вместе войдем в мир рисования Canvas.
Создать холстВо-первых, нам нужно определить, поддерживает ли браузер Canvas:
isCanvasSupported = (): boolean => { let elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));}Затем выберите создание холста или отображение подсказок на основе результатов оценки.
{isCanvasSupported ? <canvas ref={canvas => (this.canvas = Canvas)} height={canvasHeight} width={canvasWidth}> : Извините, текущий браузер не поддерживает эту функцию! }Мы знаем, что каждый узел Canvas имеет соответствующий объект контекста, который мы можем получить, напрямую передав ему строку 2d в качестве единственного параметра через метод getContext() объекта Canvas. Далее мы получаем элемент Canvas через ref, а затем получаем среду рисования на холсте с помощью метода getContext().
let cxt = this.canvas.getContext('2d');this.setState({cxt: cxt});Окружающая среда готова, приступаем к рисованию!
рисоватьСначала нарисуйте стартовый путь:
cxt.beginPath();
Затем установите ширину текущей строки:
cxt.lineWidth = 5;
Установите цвет линии:
cxt.strokeStyle = '#000';
Через moveTo и lineTo рисуем линию
cxt.moveTo(0,0);cxt.lineTo(150,0);//Рисуем заданный путь cxt.stroke()
Однако мы обнаружили, что нарисованные линии были довольно жесткими.
На данный момент мы можем изменить стиль концов линий с помощью lineCap и добавить закругленные концы на каждом конце, чтобы уменьшить жесткость линий.
cxt.lineCap = 'круглый';
В то же время мы также можем указать закругленные углы при пересечении линий, установив lineJoin.
cxt.lineJoin = 'круглый';
Но мы также обнаружили, что нарисованные линии имеют очевидные неровные края. На данный момент нам нужно использовать функцию рисования теней элементов, предоставляемую Canvas, чтобы размыть неровные края. Поскольку есть тени, мы можем соответствующим образом изменить значение lineWidth.
cxt.shadowBlur = 1; cxt.shadowColor = '#000';
Стало ли оно намного круглее? На данный момент наш метод рисования линий готов. Теперь давайте посмотрим, как отслеживать события холста, чтобы добиться последовательного выполнения рисования!
Слушайте события холстаПоскольку нам необходима совместимость как с ПК, так и с мобильными терминалами, нам необходимо заранее определить соответствующие события выполнения.
this.state = {events: ('ontouchstart' в окне) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}После инициализации холста мы начинаем прослушивать события event[0]
this.canvas.addEventListener(this.events[0], startEventHandler, false);
Прослушивайте события[1] и события[2] в функции startEventHandler.
this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);
Вот и настал момент, наше основное содержание — рассчитать и нарисовать пересеченный путь.
moveEventHandler(событие: любое): void { event.preventDefault(); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch? event.touches[0]: событие; const CoverPos = this.canvas.getBoundingClientRect() ; const mouseX = evt.clientX - CoverPos.left; const mouseY =; evt.clientY - CoverPos.top; cxt.lineTo( mouseX, mouseY );Как вы знаете о Canvas, холст Canvas предоставляет нам плоское пространство для рисования. Каждая точка пространства имеет свои собственные координаты, x представляет собой горизонтальную координату, а y представляет собой вертикальную координату. Начало координат (0, 0) расположено в верхнем левом углу изображения. Положительное направление оси X находится справа от начала координат, а положительное направление оси Y — вниз от начала координат.
Поэтому мы используем метод getBoundingClientRect(), чтобы получить расстояние в пикселях слева и сверху от элемента Canvas страницы относительно положения окна браузера, а затем используем свойства событий clientX и clientY, чтобы вернуть горизонтальные и вертикальные координаты элемента Canvas. указатель мыши на страницу браузера при срабатывании события. Наконец, путь рисуется с помощью lineTo и штриха.
В то же время мы должны помнить об удалении событий[1] иevents[2] после выполнения событияevents[2], иначе это приведет к непрерывному рисованию.
endEventHandler(событие: любое): void { event.preventDefault(); const {events, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(events[1], moveEventHandler, false); события[2], endEventHandler, false);}Наша функция подписи в основном реализуется путем многократного повторения вышеуказанных операций с событиями.
перерисоватьВ процессе подписания неизбежна неправильная или небрежная подпись, поэтому нам необходимо поддерживать функцию очистки подписи. На данный момент мы используем метод ClearRect() Canvas, который поможет нам очистить содержимое подписи. площадь холста.
cxt.clearRect(0, 0, CanvasWidth, CanvasHeight);Обработка изображений
После рисования мы еще не закончили, нам еще нужно загрузить и сохранить нарисованную подпись. На данный момент мы можем использовать метод toDataURL() для преобразования Canvas в общую форму файла изображения.
Обычно мы можем напрямую выполнить операцию по преобразованию его в URI данных, а затем использовать ajax для запроса загрузки и все.
dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);Однако из-за различных потребностей бизнеса нам иногда необходимо перенести на страницу другой контент. В настоящее время для этого мы можем использовать html2canvas. html2canvas может помочь нам сделать снимок экрана всей или части страницы на стороне браузера и отобразить его в Canvas, а затем мы используем метод toDataURL() для его обработки.
Говоря о html2canvas, позвольте мне дать вам небольшой совет. Изображения, которые он вырезает в некоторых браузерах низкой версии, являются пустыми. Причина в том, что используется гибкий макет, а html2canvas не поддерживает -webkit-flex или -webkit-box. поэтому он не может генерировать HTML в Canvas, что приводит к захвату белого экрана.
Решение:Благодаря вышеуказанным шагам мы в основном реализовали функцию онлайн-подписи. Стоит отметить, что для создания этого проекта мы использовали среду React+TypeScript. Фактическое использование приведенного выше кода необходимо соответствующим образом изменить в соответствии с вашей собственной средой.
В этой статье используются относительно поверхностные знания Canvas в области рисования. Если мы хотим использовать Canvas для создания анимации, моделирования физических эффектов, обнаружения столкновений, разработки игр, разработки мобильных приложений и разработки визуализации больших данных, нам также необходимо просмотреть имеющуюся у нас математическую геометрию. узнал раньше, знания физики, а затем медленно исследую. В настоящее время многие зрелые плагины диаграмм реализованы с использованием Canvas, например Chart.js, ECharts и т. д. В них много красивых и интересных диаграмм, охватывающих почти все реализации диаграмм. Canvas также имеет множество библиотек с открытым исходным кодом, таких как ZRender, createJS, Pixi.js и т. д. Нижний уровень ECharts также использует облегченную библиотеку классов Canvas ZRender для инкапсуляции.
Хорошо, давайте сегодня прекратим разговоры. Если у вас есть вопросы, оставьте сообщение. Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.