Fabric.jsで作る簡単Web自由帳アプリ
こんにちは、やまだゆうです。
今回はFabric.jsを使って自由帳のサンプルを紹介します！
この記事を読むことで…
- 絵を描いたりメモを書いたりできるアプリが作れるようになる
- Fabric.jsの基礎的な使い方がわかる
この記事の内容
スポンサーリンク
まずは完成形
Fabric.jsを使うことで、こんな感じでお絵かきができるWebアプリを開発することができます！
ペンタブレットと組み合わせればオリジナルのお絵かきアプリを楽しむこともできますね！
Fabric.jsでアプリを作ってみよう！
これから紹介するプログラムはぼくのGithubで公開しているので、サクッと確認したいという方はこちらを参考にしてください。
▶ https://github.com/yamaday0u/fabric-practice
Webサイトの枠組みを一発で作ってくれて楽なので、Next.jsでプロジェクトを作ります。
npx create-next-app@latest fabric-practice --yes続いてプロジェクトに移動してFabric.jsをインストールしましょう。
cd fabric-practice
npm install fabric --saveキャンバスを作成します。
'use client'
import { useEffect, useRef } from 'react'
import { Canvas, PencilBrush } from 'fabric'
export default function FabricCanvas() {
const canvasRef = useRef<HTMLCanvasElement>(null)
const fabricRef = useRef<Canvas | null>(null)
useEffect(() => {
if (!canvasRef.current) return
const canvas = new Canvas(canvasRef.current, {
isDrawingMode: true,
})
const brush = new PencilBrush(canvas)
brush.width = 5
brush.color = '#000000'
canvas.freeDrawingBrush = brush
fabricRef.current = canvas
return () => {
canvas.dispose()
}
}, [])
return (
<canvas ref={canvasRef} width={800} height={600} className="border border-gray-300" />
)
}page.tsxをまっさらにして以下のコードに丸ごと置き換えます。
import FabricCanvas from './components/FabricCanvas'
export default function Home() {
return (
<main className="flex h-full w-full items-center justify-center bg-white">
<FabricCanvas />
</main>
)
}最後にlayout.tsxを修正します。以下でハイライトした1行だけを書き換えてください。
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
lang="en"
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
>
- <body className="min-h-full flex flex-col">{children}</body>
+ <body className="h-full flex flex-col">{children}</body>
</html>
);
}ここまで実装してnpm run devを実行することで冒頭にお見せしたお絵かきができるWebアプリが確認できます！
スポンサーリンク
ちょこっと解説
このアプリのキモはapp/components/FabricCanvas.tsxです。
'use client'
import { useEffect, useRef } from 'react'
import { Canvas, PencilBrush } from 'fabric'
export default function FabricCanvas() {
const canvasRef = useRef<HTMLCanvasElement>(null)
const fabricRef = useRef<Canvas | null>(null)
useEffect(() => {
if (!canvasRef.current) return
// canvasRefを通してcanvas要素に書き込み可能なFabric.jsのキャンバスを初期化して渡している
const canvas = new Canvas(canvasRef.current, {
isDrawingMode: true,
})
// 書き込み時のペンの太さと色を設定
const brush = new PencilBrush(canvas)
brush.width = 5
brush.color = '#000000'
canvas.freeDrawingBrush = brush
// 色を変更する機能や消しゴムに切り替える機能などを追加するときはfabricRef.currentに対して設定を渡す
fabricRef.current = canvas
return () => {
canvas.dispose()
}
}, [])
return (
<canvas ref={canvasRef} width={800} height={600} className="border border-gray-300" />
)
}理解を深めるためにCanvasやPencilBrushについてドキュメントを読んでみましょう！
ここからの発展としては消しゴム機能を付けたり、キャンバスデータをデータベースに保存して何度も見直せる機能を付けたりするとどんどん楽しいアプリになってくると思います！
参考
yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村