React のページに円や矩形などを描画する必要があり、使用したライブラリのご紹介です。
「react-shapes」というライブラリで、図形を SVG で生成してくれます。
GitHub のページはこちらから。
GitHub – rsamec/react-shapes: SVG shapes for react
https://github.com/rsamec/react-shapes
実装方法ですが、まず下記コマンドでライブラリをインストールします。
npm install react-shapes --save
後は、任意の場所でライブラリをインストールして、各図形のコンポーネントを追加すればOKです。
サンプルコードは下記のとおりです。
なお、今回使用した図形は Rectangle, Ellipse, Polyline です。
import {Rectangle, Ellipse, Polyline} from 'react-shapes';
<Rectangle width={100} height={100} fill={{color: '#00F'}} stroke={{color: '#F00'}} strokeWidth={5} />
<Ellipse rx={50} ry={50} fill={{color: '#0F0'}} stroke={{color: '#00F'}} strokeWidth={3} />
<Polyline points={`20,20 100,150`} stroke={{color: '#F00'}} strokeWidth={3} />
<Rectangle> は矩形を描画できるコンポーネントです。
fill で図形を塗りつぶす色、stroke で図形の枠線の色を指定できます。
strokeWidth で枠線の太さを変更できます。
これらは、円や直線でも同じように使用できます。
<Ellipse> は楕円を描画できるコンポーネントで、円の垂直の半径と水平の半径でサイズを指定します。
正円を描画するなら <Circle> の方が良さそうですが、私の場合は楕円を描画する可能性があったので、<Ellipse> を使用しました。
<Ellipse> なら、rx と ry で同じ値を指定すれば正円になりますので、<Circle> よりも使い勝手が良いような気がしています。
直線の描画には <Polyline> を使っていますが、こちらは折れ線を描画できるコンポーネントなので、上記のように単純な2点間の直線を描画するなら <Line> で問題ないです。
<Polyline> を使ったのは単純に私の好みで、こちらの方が分かりやすいような気がしたためです。
勿論、お好きな方をお選びください！
他にも、<CornerBox> と <Triangle> というコンポーネントもありましたが、こちらは今回使わなかったので割愛させていただきます。
以上、React で円や矩形などを簡単に描画できるライブラリ「react-shapes」のご紹介でした。
ご参考になれば幸いです。
