如何在vue中配置Fabric.js？

Question

我刚刚发现了一个相同的组合：Fabric.js和Vue.js，不过我正在使用VueJs几天，不知道如何在Vue中设置fabric。
你能分享一些经验给我吗？

- Ziteng Wang

Answer 1

安装 Fabric

yarn add fabric # or npm install -s fabric

基本组件（基于 @laverick 的回答）：

<template>
  <canvas ref="can" width="200" height="200"></canvas>
</template>

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    const ref = this.$refs.can;
    const canvas = new fabric.Canvas(ref);
    const rect = new fabric.Rect({
      fill: 'red',
      width: 20,
      height: 20
    });
    canvas.add(rect);
  }
};
</script>

- Ben Winding

---

非常感谢你，你帮了我很多，这段代码。 - otrejni

Answer 2

假设您正在使用 ES6 和打包工具（例如 Webpack），您可以按照以下方式开始使用 Fabric.js：

在命令行中：

npm install fabric

or

yarn add fabric

然后在你的 .js 文件中导入它。

import { fabric } from 'fabric'

在Vue的mounted方法中设置你的Canvas。

注意：对于我而言，默认的fabric npm模块的包很大。我最终使用了fabric-browseronly模块。Fabric.js具有许多您可能不需要的功能，如果您不需要这些功能，则可以通过此处或通过命令行构建自己的版本。

- laverick

---

编辑： created 发生在 DOM 被绘制之前，因此组件尚未呈现要绑定的 DOM... - bcr

这也适用于通过npm安装fabric-browseronly。 - wobsoriano

我正在使用Vue 3和Vite，当我使用import方法时，我会得到以下错误：SyntaxError: The requested module '/@modules/fabric/dist/fabric.js' does not provide an export named 'fabric'。 - Wayne Smallman

@WayneSmallman 或许事情有所进展，因为我成功地将 fabric 导入到 vue3 中。"fabric": "^5.3.0", "vue": "^3.2.47" 例如：<script setup> import { fabric } from 'fabric' - abulka

Answer 3

Fabric遵循传统的分发布局。

您需要使用来自dist目录的文件。fabric.js用于开发工作，fabric.min.js用于现场网站。

- Fabol Lous