js：キャンバスを使用して画像注釈関数を作成します

キャンバス関連ライブラリの選択

名前	スター（2021.3）	ドキュメンテーション	備考
fabricjs	18.2k	http://fabricjs.com/	--------
konva	6k	https://konvajs.org/	----------
反応コンバ	3.8k	同上	---------
vue-konva	682	同上	----------
反応キャンバス	2.8k	-	2007年はメンテナンスなし、react16はサポートされていません。注意して使用してください

複雑なキャンバスグラフィックを描画します。これにより、キャンバスをDOMのように操作できるようになり、キャンバス内の要素のイベントメカニズムが提供され、ドラッグアンドドロップ操作がサポートされます。

fabricjsの例

たとえば、私たちは通常、このような小さな正方形を描くためにキャンバスを使用します。

// reference canvas element (with id="c")
var canvasEl = document.getElementById('c');

// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvasEl.getContext('2d');

// set fill color of context
ctx.fillStyle = 'red';

// create rectangle at a 100,100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);

ファブリックの使用は次のようになります

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
    
    
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

はるかに便利ですか

react-konvaの例