浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】手書きキャンバスを実装できるライブラリ「react-signature-canvas」

React でペイントアプリなどのように、キャンバスに自由にお絵描きできる機能を実装したいときにおすすめのライブラリです。
JavaScript なら canvas を使うのが一般的かと思うのですが、苦手なのでもっと簡単なものを…と探したら、「react-signature-canvas」というライブラリがヒットしました。

GitHub のページはこちらです。

GitHub – agilgur5/react-signature-canvas: A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://github.com/agilgur5/react-signature-canvas

 

実装方法ですが、まずライブラリのインストールを下記コマンドで行います。

npm install --save react-signature-canvas

上記が完了したら、あとはプロジェクトにインポートするだけです。
サンプルコードは下記のとおりです。

import React from 'react'
import SignatureCanvas from 'react-signature-canvas'

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <SignatureCanvas
          penColor='green'
          canvasProps={{ width: 500, height: 500 }}
        />
      </div>
    )
  }
}
export default Example;

こちらを実行すると、500 × 500 のサイズで、お絵描きできるキャンバスが作成されます。
線の色も penColor で変更できますので、こちらは state で管理するといいかもしれませんね。
penColor はデフォルト色は黒色です。
なお、このままだと白背景に白キャンバスで全く見えないので、枠線等を CSS で付けることをおすすめします。

 

以上、React で手書きキャンバスを実装できるライブラリ「react-signature-canvas」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (2)