sm annotate

비디오 및 이미지 주석 도구

이 프로젝트는 HTML 비디오 및 이미지 요소를위한 주석 도구를 제공합니다. 이 도구를 통해 사용자는 곡선, 사각형, 타원 및 텍스트를 포함한 다양한 드로잉 도구를 사용하여 비디오 및 이미지를 그리워하고 주석을 달 수 있습니다. 사용자는 주석의 색상 및 뇌졸중 크기를 사용자 정의 할 수도 있습니다.

데모 : lifeart.github.io/sm-annotate

특징

• 비디오 및 이미지 요소에 대한 그리기 및 주석.
• 다중 드로잉 도구 (곡선, 사각형, 타원 및 텍스트).
• 주석을위한 맞춤형 색상 및 스트로크 크기.
• UNDO 기능.
• 그려진 모양의 직렬화 및 사막화.
• 현재 캔버스 크기로 모양을 스케일링합니다.
• hick undo의 키보드 바로 가기 (ctrl/cmd + z).
• 포인터 이벤트를위한 이벤트 처리 (마우스 및 터치).
• 주석이 달린 프레임의 재생.
• 주석이 달린 현재 프레임 또는 모든 프레임을 저장합니다.
• 비디오 오버레이 호의

추가 혜택

• 제로 의존성.
• 모바일 장치 지원.
• 강력한 플러그인 시스템.
• TypeScript로 작성되었습니다.

시작하기

원사를 사용하여 프로젝트에 패키지를 추가하십시오.

yarn add https://github.com/lifeart/sm-annotate.git

용법

 import { SmAnnotate } from '@lifeart/sm-annotate' ;
const video = document . getElementById ( 'video' ) ;
const annotationTool = new AnnotationTool ( video ) ;

사용자는 사용 가능한 도구 (곡선, 사각형, 타원 및 텍스트)를 사용하여 그리거나 주석을 달고 주석의 색상 및 스트로크 크기를 사용자 정의 할 수 있습니다. 이 도구는 또한 포인터 이벤트 (마우스 및 터치)를위한 실행 취소 기능 및 이벤트 처리를 지원합니다.

주석이 달린 현재 프레임 또는 모든 프레임을 저장하려면 saveCurrentFrame 또는 saveAllFrames 방법을 각각 사용하십시오.

핫키

곡선 도구

키 코드	결과
Shift	돋보기 x2
r	붉은 색
g	채색
b	푸른 색
y	황
1 9	도구 크기

기여

우리는 프로젝트를 개선하기위한 기여를 환영합니다. 자유롭게 문제를 제출하거나 고려해야 할 요청을 가져 오십시오.

특허

이 코드는 비상업적 사용이 허용됩니다. 상업용으로 사용자는 저자에게 연락해야합니다.