React + fabric.jsで手書き表現
fabric.js を React 環境下で使う機会があったので、開発手順をまとめます。 作ったもの 手書きできます 文字の色・太さを変えられます その他、ダウンロードもできます(デモでは動きません)。 デモ 状態管理について 状態管理にはunstated-nextと useReducer を利用しました。 キャンバスの初期化 fabric.js では、提供される変数 fabric のプロパティとして、いくつかのクラスを利用できます。今回は fabric.Canvas を利用し、コンストラクタには紐づける canvas 要素の ID を指定します。canvas 要素が先に必要なので、useEffect を利用して最初のレンダリング後にクラスを作成します。コンストラクタには canvas 要素自体を指定することもできるので、ID を割り振らず、useRef を使ってもいいかもしれません。 i
Instagramのような画像加工について調べました。 : コーヒーと本と甘いもの
コーヒーと本と甘いもの Rails, AngularJS, iOS, デザイン, CI, スタートアップ, 登山, バスケなどに興味があります。 今回は、iOSやAndroidのようなネイティブアプリではなく、JSでinstagramのような画像処理を行う方法を２つご紹介しまます。 Filtrr2.jsを使う方法 filtrr2.jsはJSによる画像加工ライブラリです。html5のcanvas要素に描画することで実現しています。使い方はとても簡単です。 ソースコードを以下からダウンロードします。 https://github.com/alexmic/filtrr/zipball/master 依存コードも含めて、filtrr2.jsをアプリケーション内に配置します。 以下のようにFiltrr2クラスにイメージ要素のIDと描画オプションを指定します。 var topImage = Filtr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
