我刚开始研究使用fabric.js，但是我发现非常少的资源来说明如何在我的网站上安装它。我只能找到一个stackoverflow问题，其中引用了文件“all.min.js”，但是在对未压缩的文件进行快速搜索后，该文件已不存在。
我在过去几个小时里搜遍了互联网，看起来这应该是人尽皆知的！但我仍然卡住了。
我应该在HTML中链接哪个文件？
编辑：为了澄清，我从fabric.js的github上下载了一个大型ZIP文件。我不确定应该链接哪个文件以包含库。
3个回答
19
一个更现代的 fabric.js hello-world，使用 ES6 模块和 vite（截至2023年）
自从我写下面的答案以来，情况有所改善，使用 ES6-Modules 和 vite 变得更加容易。
ES6 模块的更改很简单。只需将以下补丁应用到 index.html 文件中：
--- index.html.old 2023-07-19 20:06:57.824477914 +0200
+++ index.html 2023-07-19 19:56:13.651532983 +0200
@@ -11,7 +11,7 @@
height="400"
style="border:1px solid #000000;">
</canvas>
- <script src="main.js"></script>
+ <script type="module" src="main.js"></script>
</body>
</html>
使用
vite，安装它而不是 webpack，使用以下命令：npm install --save-dev vite
下一步，您可以通过运行以下命令将其作为开发服务器运行：
./node_modules/.bin/vite serve
使用以下命令构建生成的文件：
./node_module/.bin/vite build
由于这些命令繁琐，可以将它们添加到package.json中：
{
...
"scripts": {
"serve": "vite serve",
"build": "vite build"
},
...
}
然后你可以直接运行npm run build或npm run serve
使用webpack的更现代化的fabric.js hello-world示例（2018年状态）
这种方法的优势
fabric.js不需要提交到版本控制- 只需两个命令即可从头开始运行项目：
git clone <url>和npm install，因为所有依赖项都在package.json中 - 更新到最新的fabric版本只需运行
npm update即可 - 不仅fabricjs代码，你自己的代码也将被压缩。
- 并且它提供了webpack提供的所有其他好处
假设
这假设...
- ... 确保您已经安装了 NPM
>= 5.2（如果我没记错的话，这是 webpack 所需要的）。 - ... 确保您可以访问 CLI shell 来运行
npm和webpack命令。 - ... 确保 npm 可执行文件位于您的路径中。默认情况下，在 *nix 系统上为：
$HOME/.local/bin
注意：如果您已经安装了 npm，则无需以超级用户/根用户身份访问系统。
准备工作
首先，初始化一个新的 npm 项目：
mkdir my-fabric-project
cd my-fabric-project
npm init -y
然后将webpack安装到该文件夹中（我们以后会用到它）：
npm install webpack webpack-cli --save-dev
此外，安装
fabricjs，因为这是我们项目的依赖项。npm install --save fabric
上面的两个`npm install`命令将填充我们的`package.json`文件，其中包含生产环境（fabricjs）和开发环境（webpack和webpack-cli）的依赖项。
注意：在安装webpack时，我在撰写本文时遇到了有关`cairo`的错误。但是它们似乎是无害的。`cairo`是一个图形库，我认为只有在您想要在`nodejs`进程中运行`fabricjs`时才需要它。浏览器已经能够渲染图形，因此在客户端代码中运行`fabricjs`时，这不是一个问题。否则，您可能需要安装所需的头文件。我假设（未经测试）可以通过在基于debian的系统上安装软件包`libcairo-dev`来解决此错误。
代码
现在我们已经准备好开始编码了。
创建两个文件夹`src`和`dist`，这样我们的源代码树就变成了：
.
├── node_modules
| ├...
| └── ...
├── dist
├── package-lock.json
├── package.json
└── src
2 directories, 2 files
在
dist文件夹中创建一个名为index.html的HTML文件，其内容如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #000000;">
</canvas>
<script src="main.js"></script>
</body>
</html>
还有一个位于
src文件夹中的JavaScript文件index.js，内容如下：import {fabric} from 'fabric';
function run() {
let canvas = new fabric.Canvas('myCanvas');
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
run();
这将给我们提供以下的目录结构：
.
├── node_modules
| ├...
| └── ...
├── dist
│ └── index.html
├── package-lock.json
├── package.json
└── src
└── index.js
2 directories, 5 files
你可能会注意到，
dist/index.html 引用了一个名为 main.js 的文件，但实际上并不存在。我们需要运行 webpack 来创建它：npx webpack
你的代码现在应该可以工作了。要么手动打开
dist/index.html，要么从控制台运行一个迷你Web服务器进行测试：(cd dist && python3 -m http.server)
就是这样！
这将帮助您开始项目，并利用webpack的强大功能轻松拆分代码。祝您好运并玩得开心！
好知道
当运行
webpack时，dist/main.js和src/index.js是默认的文件名。webpack默认会在dist/main.js中创建压缩代码。这是因为它默认以"production"模式运行。要更改此设置，请创建一个名为webpack.config.js的文件，并包含以下内容：module.exports = { mode: 'development' };您可以使用以下命令来运行它：
npx webpack --config webpack.config.js
- exhuma
2
1非常好的指导。我来自2022年12月的未来，确认如果您想要开始将FabricJS构建到您的标准ES6基础构建管道中，这是正确的方法。而且，FabricJS仍然是所有Canvas库中最重要的库，使用起来非常愉快。 - ultrasounder
@ultrasounder 感谢你提醒我回复这个问题。这促使我更新了工具链。 - exhuma
17
你只需要从这里下载 fabric.js 并将其保存为名为 fabric.js 的 js 文件，然后创建一个名为 index.html 的 html 文件并复制以下内容。
要运行此示例，这两个文件 fabric.js 和 index.html 应该放在同一个文件夹中。
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
选项
您可以从这里以任何格式下载fabric.js
- Suman Bogati
3
2我不建议使用版本控制中未发布的版本。已经有发布版本的下载可用，原问题暗示（通过讨论“未解压的文件”）他们已经拥有它。 - Quentin
啊，我明白了。看起来我下载的是他们网站上链接的完全不同版本。谢谢！我下载的是一个包含大量不同js文件的巨大zip文件。编辑：实际上看起来我下载了正确的文件，只是对链接的位置感到困惑。 - Aaa
我该如何使用图像来代替绘制圆形？ - Chirag Patel
5
Fabric遵循传统的分布式布局。
你需要使用 dist 目录中的文件。fabric.js用于开发工作，fabric.min.js用于实际网站。
- Quentin
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接