sm annotate

ビデオおよび画像アノテーションツール

このプロジェクトは、HTMLビデオおよび画像要素の注釈ツールを提供します。このツールを使用すると、ユーザーは、曲線、長方形、楕円、テキストなど、さまざまな描画ツールを使用してビデオや画像を描画して注釈を付けることができます。ユーザーは、注釈の色とストロークサイズをカスタマイズすることもできます。

デモ：lifeart.github.io/sm-annotate

特徴

• ビデオおよび画像要素を描画して注釈を付けます。
• 複数の描画ツール（曲線、長方形、楕円、テキスト）。
• アノテーション用のカスタマイズ可能な色とストロークサイズ。
• infulation機能を元に戻します。
• 描かれた形状のシリアル化と脱介入。
• 現在のキャンバスサイズへの形状のスケーリング。
• ⌨元に戻すためのキーボードショートカット（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	ツールサイズ

貢献

プロジェクトを改善するための貢献を歓迎します。お気軽に問題を提出したり、検討のためにリクエストを引き出したりしてください。

ライセンス

このコードは、非営利的な使用に許可されています。商業用に使用するために、ユーザーは著者に連絡する必要があります。