v-perfect-signature

설명

🔖 vue 전자 서명 라이브러리

설치

npm i v-perfect-signature

사용법

• 기본

<script setup>
import { ref } from 'vue'
import { VPerfectSignature } from 'v-perfect-signature'

const signaturePad = ref()
const strokeOptions = {
  size: 16,
  thinning: 0.75,
  smoothing: 0.5,
  streamline: 0.5,
}

function toDataURL() {
  const dataURL = signaturePad.value.toDataURL()
  console.log(dataURL)
}
</script>

<template>
  <VPerfectSignature ref="signaturePad" :stroke-options="strokeOptions" />
</template>

• Props

  Props	설명	기본값
  width	캔버스 너비 설정	100%
  height	캔버스 높이 설정	100%
  backgroundColor	캔버스 배경색 설정	rgba(0,0,0,0)
  penColor	펜 색상 설정	#000
  strokeOptions	선 옵션 설정

• strokeOptions   

  Property	Type	기본값	설명
  size	number	8	스트로크의 기본 크기(지름)
  thinning	number	.5	압력이 스트로크의 크기에 미치는 영향
  smoothing	number	.5	스트로크의 가장자리를 얼마나 부드럽게 할지 결정하는 값
  streamline	number	.5	스트로크를 얼마나 간소화할지를 결정하는 값
  simulatePressure	boolean	true	속도에 기반하여 압력을 시뮬레이션할지 여부를 결정
  easing	function	t => t	각 포인트의 압력에 적용할 이징 함수
  start	{ }		라인의 시작 부분에 대한 테이퍼링 옵션
  end	{ }		라인의 끝 부분에 대한 테이퍼링 옵션
  last	boolean	false	스트로크가 완료되었는지 여부를 나타내는 불리언 값 true로 설정하면, 라인의 끝이 마지막 입력 포인트에서 그려짐

• start, end

  Property	설명	기본값
  cap	캡을 그릴지 여부.	true
  taper	테이퍼링 할 거리. 숫자 또는 불리언 값으로 설정 가능 만약 true로 설정하면, 테이퍼링은 스트로크의 총 길이
  easing	테이퍼링 효과에 적용할 이징 함수

• Methods 

  Methods	설명	반환값
  toDataURL(type)	서명 이미지를 데이터 URL로 반환	string
  fromDataURL(dataUri)	데이터 URL에서 서명 이미지 그리기
  toData()	입력 포인트의 배열로 서명 이미지를 반환
  fromData(data)	입력 포인트의 배열에서 서명 이미지 그리기
  clear()	캔버스 초기화
  isEmpty()	캔버스가 비어 있는지 확인 (비어 있을 경우 true)	boolean
  resizeCanvas(shouldClear)	캔버스의 크기를 조정하고 차원 재계산

• Events 

  Events	설명
  onBegin	스트로크가 시작될 때 발생하는 이벤트
  onEnd	스트로크가 끝날 때 발생하는 이벤트