我如何在vue中设置Fabric.js？

Question

我刚遇到相同的组合：Fabric.js 和 Vue.js 并且想知道，但我正在使用 VueJs 几天，我不知道如何在 vue 中设置 fabric .
可以分享一些经验吗？

Answer 1

Fabric 遵循相当传统的分布布局。

您想使用 dist 目录中的文件。 fabric.js 用于开发工作，fabric.min.js 用于实时站点。

Answer 2

假设您正在使用 ES6 和 Webpack 等打包器，您可以按如下方式开始使用 Fabric.js：

在命令行

npm install fabric

或

yarn add fabric

然后将其导入到您的 .js 文件中。

import { fabric } from 'fabric'

然后在 Vue 的 mounted: 方法中设置您的 Canvas。

注意：对我来说，默认的 fabric npm 模块产生了相当大的包。我最终改用 fabric-browseronly 模块。 Fabric.js 有很多您可能不需要的功能，在这种情况下，您可以构建自己的版本 here 或通过命令行。

Answer 3

安装结构

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>

我如何在vue中设置Fabric.js？

How can I set up Fabric.js in vue?

javascript

fabricjs

vue.js