- fabric の公式ページ
http://fabricjs.com/ - fabric の GitHub
https://github.com/fabricjs/fabric.js - fabric の npm
https://www.npmjs.com/package/fabric
(1) fabric パッケージを追加する
bash
> npm i fabric
> npm i -D @types/fabric
package.json
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@types/fabric": "^5.3.6",
"nuxt": "^3.8.1"
},
"dependencies": {
"fabric": "^5.3.0"
}
}
(2) fabric を内包した AppCanvas コンポーネントを作成する
components/AppCanvas.vue
<template>
<canvas ref="canvasRef" width="300" height="300"></canvas>
</template>
<script lang="ts" setup>
import { fabric } from "fabric";
// template内のキャンバスを参照
const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
// fabricを初期化
const canvas = new fabric.Canvas(canvasRef.value!);
canvas.isDrawingMode = true; // お絵描きモードを有効
});
</script>
<style>
canvas {
border: 1px solid #eee;
}
</style>
(3) AppCanvas を使う
SSR 環境だと Nodejs 上で fabric を import してしまうことになるので、 Nuxt3 が提供する ClientOnly タグを使用してブラウザでのみ AppCanvas コンポーネントを使用するように指定。
app.vue
<template>
<ClientOnly>
<AppCanvas></AppCanvas>
</ClientOnly>
<template>
fabric で手振れ補正(線補正)機能を使う方法
鉛筆ブラシ(fabric.PencilBrush)の decimate のプロパティの数値を適当に大きくすることで線の補正ができる。
components/AppCanvas.vue
<script lang="ts" setup>
import { fabric } from "fabric";
// template内のキャンバスを参照
const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
// fabricを初期化
const canvas = new fabric.Canvas(canvasRef.value!, {
isDrawingMode: true, // お絵描きモードを有効
});
// 鉛筆ブラシのdecimateのプロパティの数値を適当に大きくすることで線の補正ができる。
const brush = new fabric.PencilBrush(canvas);
brush.decimate = 4; // default: 0.4
// fabricのcanvasにブラシを反映
canvas.freeDrawingBrush = brush;
});
</script>
おわり。