컴퓨터와 네트워크 기술의 급속한 발전으로 종이 없는 사무실에서 온라인 서명 기술이 점점 더 많이 사용되고 있습니다. 이러한 직관적이고 편리한 조작은 사무실 효율성을 크게 향상시킬 뿐만 아니라 디지털 저장 방법을 사용하여 저장 및 검색의 어려움과 같은 전통적인 문제를 방지합니다. 종이 서명. 일상 생활에는 POS 기계 서명, 특급 배송 서명, 은행 또는 정부 기관 비즈니스 서명 등과 같이 온라인 서명 기술이 사용되는 시나리오가 이미 많이 있습니다. 최근에는 온라인 서명과 관련된 회사의 비즈니스 처리 요구 사항을 처리하고 있습니다. 다음으로 Canvas를 사용하여 온라인 서명을 구현하는 방법에 대해 이야기하겠습니다.
캔버스란 무엇입니까?Canvas는 웹 페이지에 그래픽을 그리는 데 사용되는 HTML5의 새로운 요소입니다. Apple이 Safari 1.3 웹 브라우저에서 도입한 이유는 Safari의 HTML 그리기 기능을 Mac OS X에서도 사용할 수 있기 때문입니다. Desktop 구성 요소이며 Apple은 Dashboard에서 스크립트 그래픽을 지원하는 방법도 원했습니다. Firefox 1.5와 Opera 9 두 브라우저도 Safari의 뒤를 이어 Canvas를 지원하기 시작했습니다.
이제 Canvas 태그는 HTML5의 가장 큰 개선 사항 중 하나입니다. 이를 통해 이미지를 사용하지 않고도 웹 페이지의 그래픽 디자인을 구현할 수 있기 때문입니다. 이는 캔버스와 같습니다. 그리기 기능은 없지만 JavaScript 지원을 통해 그리기 API를 캔버스 범위 내에서 사용하여 원하는 효과를 얻을 수 있습니다.
기술선택이 기능은 Canvas, SVG, Flash 등 무엇이든 구현할 수 있는데 왜 Canvas를 선택했을까요?
우선 모바일 플랫폼을 기능적으로 지원해야 하기 때문에 플래시를 직접 버릴 수 있는데, 캔버스와 SVG 모두 크로스 플랫폼 기능이 뛰어나다는 점을 비교해 볼까요?
둘 다 각자의 전문 분야가 있습니다. 위 내용을 토대로 시그니처 기능을 구현하기 위해 Canvas를 선택했습니다.
다음으로 구현효과를 살펴보자.
캔버스의 원천과 기술 선택, 최종 렌더링 효과를 이해한 후 생성, 그리기, 모니터링, 다시 그리기, 이미지 처리의 5가지 부분을 함께 작성해 보겠습니다.
캔버스 만들기먼저 브라우저가 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 노드에 상응하는 컨텍스트 객체가 있다는 것을 알고 있으며, 이는 Canvas 객체의 getContext() 메소드를 통해 문자열 2d를 유일한 매개변수로 직접 전달하여 얻을 수 있습니다. 다음으로 ref를 통해 Canvas 요소를 얻은 후, 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';
이제 선을 그리는 방법이 준비되었습니다. 다음으로, 일관된 그리기 실행을 위해 캔버스 이벤트를 모니터링하는 방법을 살펴보겠습니다.
캔버스 이벤트 듣기PC와 모바일 단말 모두와 호환되어야 하기 때문에 해당 실행 이벤트를 미리 파악해야 합니다.
this.state = {events: ('ontouchstart' in window) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup']}캔버스가 초기화된 후 events[0] 이벤트 수신을 시작합니다.
this.canvas.addEventListener(this.events[0], startEventHandler, false);
startEventHandler 함수에서 이벤트[1] 및 이벤트[2]를 수신합니다.
this.canvas.addEventListener(events[1], moveEventHandler, false);this.canvas.addEventListener(events[2], endEventHandler, false);
여기서 요점이 나옵니다. 우리의 핵심 내용은 교차 경로를 계산하고 그리는 것입니다.
moveEventHandler(event: any): void { event.preventDefault(); const {ctx, isSupportTouch} = this.state; const evt = isSupportTouch ? event.touches[0] : event; ; const mouseX = evt.clientX - CoverPos.left = evt.clientY -coverPos.top; cxt.lineTo(mouseX, mouseY);}캔버스에 대해 아시다시피 캔버스 캔버스는 그림을 그릴 수 있는 평평한 공간을 제공합니다. 공간의 각 점은 자체 좌표를 가지며 x는 가로 좌표를 나타내고 y는 세로 좌표를 나타냅니다. 원점(0, 0)은 이미지의 왼쪽 상단에 위치합니다. x축의 양의 방향은 원점의 오른쪽이고, y축의 양의 방향은 원점에서 아래쪽입니다.
따라서 getBoundingClientRect() 메서드를 사용하여 브라우저 창 위치를 기준으로 페이지 Canvas 요소의 왼쪽과 위쪽까지의 픽셀 거리를 얻은 다음 clientX 및 clientY 이벤트 속성을 사용하여 캔버스의 가로 및 세로 좌표를 반환합니다. 이벤트가 트리거될 때 브라우저 페이지에 대한 마우스 포인터. 마지막으로 lineTo 및 스트로크를 사용하여 경로가 그려집니다.
동시에 events[2] 이벤트가 실행된 후에는 events[1] 및 events[2]를 제거해야 합니다. 그렇지 않으면 연속 그리기가 발생합니다.
endEventHandler(이벤트: 임의): void { event.preventDefault(); const {events, moveEventHandler, endEventHandler} = this.state; this.canvas.removeEventListener(events[1], moveEventHandler, false); 이벤트[2], endEventHandler, false);}위의 이벤트 연산을 반복적으로 반복함으로써 우리의 서명 기능이 기본적으로 구현됩니다.
다시 그리다서명 과정에서 잘못된 서명이나 너무 엉성한 서명이 불가피하므로 서명을 지우는 기능을 지원해야 합니다. 이때 Canvas의clearRect() 메소드를 사용하여 서명 내용을 지울 수 있도록 도와줍니다. 캔버스 영역.
cxt.clearRect(0, 0, canvasWidth, canvasHeight);이미지 처리
그림을 그린 후에는 아직 끝나지 않았습니다. 그려진 서명을 업로드하고 저장해야 합니다. 이때 Canvas를 일반 이미지 파일 형태로 변환하기 위해서는 toDataURL() 메소드를 사용할 수 있습니다.
일반적으로 데이터 URI로 변환하는 작업을 직접 수행한 다음 ajax를 사용하여 업로드를 요청하면 그게 전부입니다.
dataurl = this.canvas.toDataURL('image/png');//ordataurl = this.canvas.toDataURL('image/jpeg', 0.8);그러나 다양한 비즈니스 요구로 인해 페이지에 다른 콘텐츠를 포함해야 하는 경우가 있습니다. 이때 html2canvas를 사용하여 이를 달성할 수 있습니다. html2canvas는 브라우저 측에서 페이지 전체 또는 일부의 스크린샷을 찍어 이를 캔버스로 렌더링한 다음 toDataURL() 메서드를 사용하여 처리하는 데 도움이 됩니다.
html2canvas에 대해 말하자면, 일부 낮은 버전의 브라우저에서 잘리는 그림은 공백입니다. 그 이유는 flex 레이아웃이 사용되고 html2canvas는 -webkit-flex 또는 -webkit-box를 지원하지 않기 때문입니다. 따라서 HTML을 캔버스로 생성할 수 없어 흰색 화면 캡처가 발생합니다.
해결책:위의 단계를 통해 우리는 기본적으로 온라인 서명 기능을 구현했습니다. 이 프로젝트를 빌드하기 위해 React+TypeScript 환경을 사용했다는 점은 주목할 가치가 있습니다. 위 코드의 실제 사용은 자신의 환경에 따라 적절하게 수정되어야 합니다.
이 기사에서는 Canvas에 대한 비교적 얕은 그리기 지식을 사용합니다. 애니메이션 제작, 물리적 효과 시뮬레이션, 충돌 감지, 게임 개발, 모바일 애플리케이션 개발 및 빅데이터 시각화 개발에 Canvas를 사용하려면 우리가 가지고 있는 수학적 기하학도 검토해야 합니다. , 물리학 지식을 배운 다음 천천히 탐구합니다. 요즘에는 Chart.js, ECharts 등과 같은 성숙한 차트 플러그인이 Canvas를 사용하여 구현됩니다. 여기에는 거의 모든 차트 구현을 포괄하는 아름답고 멋진 차트가 많이 있습니다. Canvas에는 ZRender, createJS, Pixi.js 등과 같은 많은 오픈 소스 라이브러리도 있습니다. ECharts의 하단 레이어도 캡슐화를 위해 경량 Canvas 클래스 라이브러리 ZRender를 사용합니다.
자, 오늘은 여기서 그만 이야기하고 궁금한 점이 있으면 메시지를 남겨주세요. 위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.