如何设置Fabric.js？

Question

我刚开始研究使用fabric.js，而且我发现很少有关于如何在我的网站上安装它的资源。 我只能找到一个引用文件“all.min.js”的堆栈溢出问题，该文件在快速搜索解压缩文件后不再存在。

我在过去的几个小时里搜索过互联网，看起来它应该是常识！ 我仍然被困住了。

我应该在HTML中链接哪个文件？

编辑：为了澄清，我从fabric.js的github上下载了一个大的ZIP文件。 我很困惑我应链接到哪个文件以包含库。

Answer 1

您只需从HERE下载fabric.js并将其保存为名为fabric.js js文件，并创建html文件，假设index.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>

选项

您可以从HERE下载任何格式的fabric.js

Answer 2

Fabric遵循相当传统的分布布局。

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

Answer 3

**使用webpack的更现代的fabric.js hello-world（2018年）**

这种方法的优点

fabric.js不需要提交到版本控制
鉴于所有依赖项都在package.json只需要两个命令即可从头开始运行并运行项目： git clone <url>和npm install
更新到最新的结构版本就像运行npm update一样简单
不仅fabricjs代码，而且你自己的代码将缩小。
它为您提供webpack提供的所有其他好东西

假设

这假设......

......你有NPM >= 5.2 （如果我没记错的话，webpack需要这个）。
...您可以访问CLI shell以运行npm和webpack命令。
... npm二进制文件在你的路径上。 默认情况下：* nix系统上的$HOME/.local/bin

注意：您不需要在系统超级用户/ root访问权限，如果你已经有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命令将填充包含production（fabricjs）和development（webpack＆webpack-cli）依赖项的package.json文件。

注意：安装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"
    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的强大功能轻松拆分代码。 祝你好运，玩得开心！

很高兴知道

文件名dist/main.js和src/index.js是在没有配置的情况下运行webpack时的默认值
webpack会在dist/main.js创建缩小的代码。 这是因为默认情况下它以“生产”模式运行。 要更改此设置， webpack.config.js使用以下内容创建名为webpack.config.js的文件：
```
 module.exports = { mode: 'development' }; 
```
您可以使用它运行：
```
 npx webpack --config webpack.config.js 
```

如何设置Fabric.js？

问题描述

3 个解决方案

解决方案1
10 2014-08-24 17:59:08

解决方案2
4 已采纳 2014-08-24 18:34:45

解决方案3
4 2018-08-19 11:00:17

**使用webpack的更现代的fabric.js hello-world（2018年）**

这种方法的优点

假设

准备工作

代码

很高兴知道

如何设置Fabric.js？

问题描述

3 个解决方案

解决方案1 10 2014-08-24 17:59:08

解决方案2 4 已采纳 2014-08-24 18:34:45

解决方案3 4 2018-08-19 11:00:17

使用webpack的更现代的fabric.js hello-world（2018年）

这种方法的优点

假设

准备工作

代码

很高兴知道

解决方案1
10 2014-08-24 17:59:08

解决方案2
4 已采纳 2014-08-24 18:34:45

解决方案3
4 2018-08-19 11:00:17

**使用webpack的更现代的fabric.js hello-world（2018年）**