Fabric.js - 自由な描画ブラシのサイズと色にカーソルを設定します

Question

サイズが10の丸いブラシを使用しているとします。どのようにキャンバスに描かれるのかをユーザーに示すためにカーソルを変更できますか？

これらは、freeDrawingCursorのオプションですが、これは通常のカーソル用です。十字線またはポインタ。

アイデア？

Answer 1

このチェック：あなたはPNGファイルにカーソルを定義することができますように見えます

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor 

を。

カーソルのサイズの小さな一時的なキャンバスを作成し、ブラシでペイントし、png dataurlとしてエクスポートしてカーソルとして使用できます。 - 幅とブラシサイズ の高さのオフスクリーンキャンバスを作成 - dataurl に輸出キャンバス - - 選択された幅と色 の円を描くイメージを作成します。

ウェブアプリのユーザーは、カーソルの幅を選択すると、ブラシサイズの幅と高さ、画像ソースとしてdataurlを使用 - 画像がロードされ、マウスカーソルとして設定されます。