如何设置Fabric.js？

Question

I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. 我刚开始研究使用fabric.js，而且我发现很少有关于如何在我的网站上安装它的资源。 All I can find is a single stack overflow question that references the file "all.min.js", which upon a quick search of the unzipped file no longer exists. 我只能找到一个引用文件“all.min.js”的堆栈溢出问题，该文件在快速搜索解压缩文件后不再存在。

I've scoured the internet for the past few hours, and it's looking like it is supposed to be common knowledge! 我在过去的几个小时里搜索过互联网，看起来它应该是常识！ I'm still stuck though. 我仍然被困住了。

Which file should I link to in my HTML? 我应该在HTML中链接哪个文件？

Edit: Just to clarify, I downloaded a large ZIP file off fabric.js's github. 编辑：为了澄清，我从fabric.js的github上下载了一个大的ZIP文件。 I was confused as to which file I should link to to include the library. 我很困惑我应链接到哪个文件以包含库。

Answer 1

All you need to do download the fabric.js from HERE and save it as js file named fabric.js , and create the html file suppose index.html with below content. 您只需从HERE下载fabric.js并将其保存为名为fabric.js js文件，并创建html文件，假设index.html具有以下内容。

To run this example, these both fabric.js and index.html should be into one folder. 要运行此示例， 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>

Option 选项

You can download fabric.js in any format from HERE 您可以从HERE下载任何格式的fabric.js

Answer 2

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用于实时站点。

Answer 3

A more modern fabric.js hello-world using webpack* (state of 2018)* **使用webpack的更现代的fabric.js hello-world（2018年）**

Advantages of this method 这种方法的优点

fabric.js does not need to be committed to version control fabric.js不需要提交到版本控制
Given that all dependencies are in package.json only two commands are required to get up and running from scratch with your project: git clone <url> and npm install 鉴于所有依赖项都在package.json只需要两个命令即可从头开始运行并运行项目： git clone <url>和npm install
Updating to the latest fabric version is as easy as running npm update 更新到最新的结构版本就像运行npm update一样简单
Not only the fabricjs code, but also your own code will be minified. 不仅fabricjs代码，而且你自己的代码将缩小。
and it gives you all other goodies provided by webpack 它为您提供webpack提供的所有其他好东西

Assumptions 假设

This assumes... 这假设......

... that you have the NPM >= 5.2 (if I recall correctly, this is needed by webpack). ......你有NPM >= 5.2 （如果我没记错的话，webpack需要这个）。
... that you have access to a CLI shell to run the npm and webpack commands. ...您可以访问CLI shell以运行npm和webpack命令。
... that the npm binaries are on your path. ... npm二进制文件在你的路径上。 By default: $HOME/.local/bin on *nix systems 默认情况下：* nix系统上的$HOME/.local/bin

NOTE : You will not need superuser/root access to the system if you already have npm available. 注意：您不需要在系统超级用户/ root访问权限，如果你已经有npm可用。

Preparations 准备工作

First, initialise a new npm project: 首先，初始化一个新的npm项目：

mkdir my-fabric-project
cd my-fabric-project
npm init -y

Then install webpack into that folder (we will need this for later): 然后将webpack安装到该文件夹中（稍后我们将需要它）：

npm install webpack webpack-cli --save-dev

Also, install fabricjs as this is our dependency for our project: 另外，安装fabricjs因为这是我们对项目的依赖：

npm install --save fabric

The two npm install commands above will populate our package.json file containing production (fabricjs) and development (webpack & webpack-cli) dependencies. 上面的两个npm install命令将填充包含production（fabricjs）和development（webpack＆webpack-cli）依赖项的package.json文件。

NOTE: When installing webpack, I got errors regarding cairo at the time of this writing. 注意：安装webpack时，我在撰写本文时遇到了有关cairo错误。 But it seems they are harmless. 但似乎它们是无害的。 cairo is a graphics library and I assume this is only needed if you want to run fabricjs in a nodejs process. cairo是一个图形库，我假设只有你想在nodejs进程中运行fabricjs才需要这个。 Browsers are already capable of rendering graphics so when running fabricjs in client-side code this is a non-issue. 浏览器已经能够渲染图形，因此在客户端代码中运行fabricjs ，这不是问题。 Otherwise you may need to install required headers. 否则，您可能需要安装所需的标头。 I assume (not tested) that this error can be solved by installing the package libcairo-dev on debian-based systems. 我假设（未经测试）可以通过在基于debian的系统上安装包libcairo-dev来解决此错误。

The Code 代码

Now we have everything ready to get coding. 现在我们已准备好进行编码了。

Create two folders src and dist , so our source tree becomes: 创建两个文件夹src和dist ，因此我们的源代码树变为：

.
├── node_modules
|   ├...
|   └── ...
├── dist
├── package-lock.json
├── package.json
└── src

2 directories, 2 files

Create a HTML file index.html inside the dist folder with the following contents: 在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>

And also a javascript index.js in the src folder with the following contents: 还有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();

This will give us the following directory structure: 这将为我们提供以下目录结构：

.
├── node_modules
|   ├...
|   └── ...
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
    └── index.js

2 directories, 5 files

You may notice that dist/index.html references a file called main.js which does not exist. 您可能会注意到dist/index.html引用了一个名为main.js的文件，该文件不存在。 We need to run webpack to create it: 我们需要运行webpack来创建它：

npx webpack

Your code should now work. 您的代码现在应该可以使用 Either open dist/index.html manually, or run a mini-web server from the console to test: 手动打开dist/index.html ，或从控制台运行迷你Web服务器以测试：

(cd dist && python3 -m http.server)

That's it! 而已！

This should get you started with your project and also allow you to leverage the power of webpack to easily split your code. 这应该让您开始使用项目，并且还可以利用webpack的强大功能轻松拆分代码。 Good luck & Have fun! 祝你好运，玩得开心！

Good To Know 很高兴知道

The filenames dist/main.js and src/index.js are the defaults when running webpack without a config 文件名dist/main.js和src/index.js是在没有配置的情况下运行webpack时的默认值
webpack will create minified code in dist/main.js by default. webpack会在dist/main.js创建缩小的代码。 This is because it runs in "production" mode by default. 这是因为默认情况下它以“生产”模式运行。 To change this, create a file named webpack.config.js with the following contents: 要更改此设置， webpack.config.js使用以下内容创建名为webpack.config.js的文件：
```
 module.exports = { mode: 'development' }; 
```
You can use it running: 您可以使用它运行：
```
 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

A more modern fabric.js hello-world using webpack* (state of 2018)* **使用webpack的更现代的fabric.js hello-world（2018年）**

Advantages of this method 这种方法的优点

Assumptions 假设

Preparations 准备工作

The Code 代码

Good To Know 很高兴知道

如何设置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

A more modern fabric.js hello-world using webpack (state of 2018) 使用webpack的更现代的fabric.js hello-world（2018年）

Advantages of this method 这种方法的优点

Assumptions 假设

Preparations 准备工作

The Code 代码

Good To Know 很高兴知道

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

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

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

A more modern fabric.js hello-world using webpack* (state of 2018)* **使用webpack的更现代的fabric.js hello-world（2018年）**