Open2022/02/27にコメント追加4[Scrap] React Konva を試すReactKonvaへぶん2022/02/27に更新 主旨 Mind Map のツールを作ろうとしていて、Konva を調べている。 React Konva を触っているときの疑問と調べたことを書く。 https://konvajs.org/ https://github.com/konvajs/react-konva へぶん2022/02/27 Konva のテキストをユーザーが編集できるようにする マインドマップの要の UI。Canvas要素 と同じ形式で HTML を使用するための Util が別パッケージで提供されているのでそれを使用する。 https://konvajs.org/docs/react/DOM_Portal.html ただし、いくら CSS でポジションいじっても全然ポジションが合わないのでどうしたものか へぶん2022/02/27に更新ドンピシャな記事が見つかった。Medium に課金しないと見れないようだけど、時間が勿体無いので課金した。 https://medium.com/p/8ab3a6b11dfb それなりに新しい記事なのに、javascript で書かれていたり LegacyRef が使われてたりしていて、手元の TypeScript のコードに混ぜて使うのが割と大変。 へぶん2022/02/27 Ref の作り方 初歩的なことかもしれないけど、Ref の作り方忘れてた。 こんな感じで書く。 const textRef = React.useRef<Konva.Text>(null); https://github.com/konvajs/react-konva/issues/316#issuecomment-672928257 返信を追加
へぶん2022/02/27に更新 主旨 Mind Map のツールを作ろうとしていて、Konva を調べている。 React Konva を触っているときの疑問と調べたことを書く。 https://konvajs.org/ https://github.com/konvajs/react-konva
へぶん2022/02/27 Konva のテキストをユーザーが編集できるようにする マインドマップの要の UI。Canvas要素 と同じ形式で HTML を使用するための Util が別パッケージで提供されているのでそれを使用する。 https://konvajs.org/docs/react/DOM_Portal.html ただし、いくら CSS でポジションいじっても全然ポジションが合わないのでどうしたものか へぶん2022/02/27に更新ドンピシャな記事が見つかった。Medium に課金しないと見れないようだけど、時間が勿体無いので課金した。 https://medium.com/p/8ab3a6b11dfb それなりに新しい記事なのに、javascript で書かれていたり LegacyRef が使われてたりしていて、手元の TypeScript のコードに混ぜて使うのが割と大変。 へぶん2022/02/27 Ref の作り方 初歩的なことかもしれないけど、Ref の作り方忘れてた。 こんな感じで書く。 const textRef = React.useRef<Konva.Text>(null); https://github.com/konvajs/react-konva/issues/316#issuecomment-672928257 返信を追加
へぶん2022/02/27に更新ドンピシャな記事が見つかった。Medium に課金しないと見れないようだけど、時間が勿体無いので課金した。 https://medium.com/p/8ab3a6b11dfb それなりに新しい記事なのに、javascript で書かれていたり LegacyRef が使われてたりしていて、手元の TypeScript のコードに混ぜて使うのが割と大変。
へぶん2022/02/27 Ref の作り方 初歩的なことかもしれないけど、Ref の作り方忘れてた。 こんな感じで書く。 const textRef = React.useRef<Konva.Text>(null); https://github.com/konvajs/react-konva/issues/316#issuecomment-672928257
