如何在vue中设置Fabric.js？

Question

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

Answer 1

安装结构

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>

Answer 2

假设您正在使用ES6和Webpack等捆绑器,您可以开始使用Fabric.js,如下所示:

1. 在命令行:

   Canvas(或mounted:)

2. 然后将其导入.js文件中.

   fabric

3. 然后设置你fabric-browseronly的Vue Canvas方法.

注意:对我来说,默认的mounted:npm模块产生了相当大的包.我最终使用了fabric模块.Fabric.js有很多你可能不需要的功能,在这种情况下你可以在这里或通过命令行构建自己的版本.