nuxt.jsにてfabricでcanvasに四角形図形を追加できるようにする

目的

• javascriptのみでnuxt.jsのアプリにfabric.jsを導入したい

前提

• fabric.jsをインストールしている。

こちらの記事にインストール方法は書きました。

インストール

vue3のcomposition apiを使いたいので、インストールします。

yarn add @nuxtjs/composition-api

nuxt.config.jsのモジュールに追加しておきます。

nuxt.config.js

  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/composition-api/module',
  ],

vueファイル

index.vue

<template>
  <div>
    <h1>Hello, Fabric!!</h1>
    <v-btn @click="add()">add</v-btn>
    <div class="wrapper">
      <canvas id="canvas" width="600" height="600" />
    </div>
  </div>
</template>

<script lang="js">
import { computed, defineComponent } from "@nuxtjs/composition-api"
import { fabric } from "fabric"

export default defineComponent({
  setup() {
    const canvas = computed(() => new fabric.Canvas("canvas"))
    const add = () => {
      canvas.value.add(
        new fabric.Rect({
          top: 100,
          left: 100,
          width: 60,
          height: 60,
          fill: "red",
        })
      )
    }

    return { add }
  },
});
</script>

<style scoped>
.wrapper {
  width: 600px;
  height: 600px;
  border: 1px solid;
}
</style>

どのように見えるか

Addするとこのように表示される。四角形は自分の好きなように変形させることが可能。

参考

ありがとうございました。