.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
설명
vue 전자 서명 라이브러리
설치
npm i v-perfect-signature
JavaScript
복사
사용법
•
기본
<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>
JavaScript
복사
•
Props
Props | 설명 | 기본값 |
width | 캔버스 너비 설정 | 100% |
height | 캔버스 높이 설정 | 100% |
backgroundColor | 캔버스 배경색 설정 | rgba(0,0,0,0) |
penColor | 펜 색상 설정 | #000 |
strokeOptions | 선 옵션 설정 |
◦
strokeOptions
Property | Type | 기본값 | Description |
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 | 스트로크가 끝날 때 발생하는 이벤트 |
예시
TypeScript
복사
