1. 背景
ネイティブ キャンバスの操作は主にコンテキストに基づいており、ユーザーはいくつかの基本機能を最初から実装する必要がありますが、これは比較的複雑です。キャンバス ライブラリ ファイルには多くの便利なオブジェクトがカプセル化されており、ユーザーはより高度なレベルで描画できるようになります。
２つ目は公式サイト
Fabric.js 公式ウェブサイト: Fabric.js Javascript Canvas Library
Konva.js 公式 Web サイト: Konva 中国語ドキュメント 中国語 API
3、違い
1、ファブリック.js
アドバンテージ：
- 比較的古いブランドであり、一般的に使用される変換 (ズームイン、ズームアウト、ドラッグ アンド ドロップ) がパッケージ化されており、特に Canvas でインタラクティブなインターフェイスを作成するのに適しています。
- 豊富な内蔵ブラシ、基本的な位置合わせとマーキングが利用可能
- コードの統合性は比較的高く、インタラクティブなリッチ テキストが組み込まれています (純粋な Canvas 実装)。
欠点:
- コードは ES 5 を使用して開発されていますが、TypeScript を十分にサポートできず、開発効率に影響を与える可能性があります。
- ライブラリ自体が多くの関数ポイントを統合しているため、コード パッケージのサイズが大きすぎます (圧縮後 308 KB)
- マーキングシステムの実装が比較的シンプルであるなど、細かい機能はまだ改善の必要がある
2、Conva.js
アドバンテージ：
- デスクトップ/モバイル イベントのサポート
- コントロール ポイントのカスタム スタイルとイベントを簡単に実装できます
- TypeScript で書かれ、TS によってネイティブにサポートされています
- レンダリングの階層化は比較的明確です。ステージ -> レイヤー -> グループ -> シェイプ
- コードは簡潔でクリーンで読みやすいです
- コアコードは洗練されており、コードパッケージは小さい（圧縮後155 KB）
欠点:
- 一部の機能はDOM(リッチテキスト)をベースに実現されています
- 新星だが、周囲の生態系はまだ比較的弱い