如何设置 Fabric.js？
Posted
技术标签:
【中文标题】如何设置 Fabric.js？【英文标题】：How can I set up Fabric.js? 【发布时间】：2014-10-17 22:15:59 【问题描述】：我刚开始研究使用 fabric.js，但我发现关于如何在我的站点中安装它的资源非常少。我只能找到一个引用文件“all.min.js”的stack overflow question，在快速搜索解压缩文件后，该文件不再存在。
在过去的几个小时里，我已经在互联网上搜索了，它看起来应该是常识！我仍然被困住了。
我应该在我的 HTML 中链接到哪个文件？
编辑：澄清一下，我从 fabric.js 的 github 下载了一个大的 ZIP 文件。我对应该链接到哪个文件以包含库感到困惑。
【问题讨论】：
【参考方案1】：使用 webpack 的更现代的 fabric.js hello-world（2018 年状态）
这种方法的优点
fabric.js 不需要提交版本控制
鉴于所有依赖项都在 package.json 中，只需两个命令即可从头开始运行您的项目：git clone <url> 和 npm install
更新到最新的 Fabric 版本就像运行 npm update 一样简单
不仅fabricjs代码，你自己的代码也会被缩小。
它还为您提供 webpack 提供的所有其他好东西
假设
这假设...
...你有 NPM>= 5.2（如果我没记错的话，这是 webpack 需要的）。
...您有权访问 CLI shell 以运行 npm 和 webpack 命令。
... npm 二进制文件在您的路径上。默认情况下：$HOME/.local/bin 在 *nix 系统上
注意：如果您已有npm 可用，您将不需要对系统的超级用户/root 访问权限。
准备工作
首先，初始化一个新的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 文件夹内创建一个html 文件index.html，其内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
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，要么从控制台运行一个迷你网络服务器进行测试：
(cd dist && python3 -m http.server)
就是这样！
这应该可以帮助您开始您的项目，还可以让您利用 webpack 的强大功能轻松拆分代码。祝你好运，玩得开心！
很高兴知道
dist/main.js 和 src/index.js 是在没有配置的情况下运行 webpack 时的默认文件名
webpack 默认会在dist/main.js 中创建缩小代码。这是因为它默认以“生产”模式运行。要更改此设置，请创建一个名为 webpack.config.js 的文件，其内容如下：
module.exports =
mode: 'development'
;
你可以使用它运行：
npx webpack --config webpack.config.js
【讨论】：
【参考方案2】：您只需从HERE 下载fabric.js 并将其保存为名为@987654323@ 的js 文件，并创建html 文件假设index.html 具有以下内容。
要运行此示例，fabric.js 和 index.html 应位于一个文件夹中。
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" 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>
选项
您可以从HERE下载任何格式的fabric.js
【讨论】：
我不建议使用来自版本控制的未发布版本。有可用的已发布版本的下载，原始问题暗示（通过讨论“解压缩文件”）他们已经拥有它。 啊，我明白了。看起来我正在下载一个完全不同的版本，该版本链接在他们的网站上。谢谢！我下载的是一个包含大量不同 js 文件的巨大 zip。编辑：实际上看起来我下载了正确的文件，我只是对链接的位置感到困惑。 如何用图片代替画圈？【参考方案3】：Fabric 遵循非常传统的分布布局。
您想使用dist 目录中的文件。 fabric.js 用于开发工作，fabric.min.js 用于实时站点。
【讨论】：
以上是关于如何设置 Fabric.js？的主要内容，如果未能解决你的问题，请参考以下文章