[英]How can I set up Fabric.js in vue?
I just came across the same combination: Fabric.js and Vue.js and was wondering, but I'm working with VueJs few days and I don't know how to set up fabric in vue.我刚刚遇到了相同的组合:Fabric.js 和 Vue.js 并想知道,但我正在使用 VueJs 几天,我不知道如何在 vue 中设置 fabric。
Can you share some experience for me?你能分享一些经验给我吗?
Assuming you're using ES6 and a bundler such as Webpack you can start using Fabric.js as follows:假设您使用的是ES6和诸如Webpack 之类的打包程序,您可以开始使用 Fabric.js,如下所示:
At the command line在命令行
npm install fabric
or或者
yarn add fabric
Then import it in your .js file.然后将其导入到您的.js文件中。
import { fabric } from 'fabric'
Then set up your Canvas
in Vue's mounted:
method.然后在 Vue 的mounted:
方法中设置你的Canvas
。
Note: For me the default fabric
npm module resulted in quite a large package.注意:对我来说,默认的fabric
npm 模块导致了一个相当大的包。 I ended up using the fabric-browseronly
module instead.我最终使用了fabric-browseronly
模块。 Fabric.js has a lot of features you might not need, in which case you could build your own version here or via the command line. Fabric.js 有许多您可能不需要的功能,在这种情况下,您可以在此处或通过命令行构建自己的版本。
Install Fabric安装结构
yarn add fabric # or npm install -s fabric
Basic component (based on @laverick's answer):基本组件(基于@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>
Fabric follows a pretty traditional distribution layout. Fabric 遵循非常传统的分布布局。
You want to use files from the dist
directory.您想使用dist
目录中的文件。 fabric.js
for development work and fabric.min.js
for the live site. fabric.js
用于开发工作, fabric.min.js
用于实时站点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.