Question

我刚刚遇到了相同的组合：Fabric.js和Vue.js并且想知道，但是我和VueJs工作了几天，我不知道如何在vue中设置结构。
你能和我分享一些经验吗？

Answer 1

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

在命令行

npm install fabric

或

yarn add fabric

然后将其导入 .js 文件。

import { fabric } from 'fabric'

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

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

Answer 2

Fabric采用非常传统的分布式布局。

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

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？

3 个答案: