javascript 如何设置 Fabric.js？

Question

提问by Blue_Dragon360

I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. All I can find is a single stack overflow questionthat references the file "all.min.js", which upon a quick search of the unzipped file no longer exists.

我刚开始研究使用fabric.js，我发现关于如何在我的网站上安装它的资源很少。我所能找到的只是一个单堆栈溢出问题，它引用了文件“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. I was confused as to which file I should link to to include the library.

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

Answer 1

采纳答案by Quentin

Fabric follows a pretty traditional distribution layout.

Fabric 遵循非常传统的分布布局。

You want to use files from the distdirectory. fabric.jsfor development work and fabric.min.jsfor the live site.

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

Answer 2

回答by Suman Bogati

All you need to do download the fabric.js from HEREand save it as js file named fabric.js, and create the html file suppose index.htmlwith below content.

您只需要从这里下载 fabric.js并将其保存为名为的 js 文件fabric.js，然后创建假设index.html包含以下内容的 html 文件。

To run this example, these both fabric.jsand index.htmlshould 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.jsin any format from HERE

您可以fabric.js从这里下载任何格式

Answer 3

回答by exhuma

A more modern fabric.js hello-world using webpack(state of 2018)

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

Advantages of this method

这种方法的优点

fabric.jsdoes not need to be committed to version control
Given that all dependencies are in package.jsononly two commands are required to get up and running from scratch with your project: git clone <url>and npm install
Updating to the latest fabric version is as easy as running npm update
Not only the fabricjs code, but also your own code will be minified.
and it gives you all other goodies provided by webpack

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

Assumptions

假设

This assumes...

这假设...

... that you have the NPM >= 5.2(if I recall correctly, this is needed by webpack).
... that you have access to a CLI shell to run the npmand webpackcommands.
... that the npm binaries are on your path. By default: $HOME/.local/binon *nix systems

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

NOTE: You will notneed superuser/root access to the system if you already have npmavailable.

注意：您将不会需要在系统超级用户/ root访问权限，如果你已经有了npm可用。

Preparations

准备工作

First, initialise a new npmproject:

首先，初始化一个新的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 fabricjsas this is our dependency for our project:

另外，安装，fabricjs因为这是我们项目的依赖项：

npm install --save fabric

The two npm installcommands above will populate our package.jsonfile containing production (fabricjs) and development (webpack & webpack-cli) dependencies.

npm install上面的两个命令将填充package.json包含生产 (fabricjs) 和开发 (webpack & webpack-cli) 依赖项的文件。

NOTE:When installing webpack, I got errors regarding cairoat the time of this writing. But it seems they are harmless. cairois a graphics library and I assume this is only needed if you want to run fabricjsin a nodejsprocess. Browsers are already capable of rendering graphics so when running fabricjsin client-side code this is a non-issue. Otherwise you may need to install required headers. I assume (not tested) that this error can be solved by installing the package libcairo-devon debian-based systems.

注意：在安装 webpack 时，我cairo在撰写本文时遇到了错误。但似乎它们是无害的。cairo是一个图形库，我认为只有在您想fabricjs在nodejs进程中运行时才需要它。浏览器已经能够渲染图形，因此fabricjs在客户端代码中运行时，这不是问题。否则，您可能需要安装所需的标头。我假设（未测试）这个错误可以通过在libcairo-dev基于 debian 的系统上安装包来解决。

The Code

代码

Now we have everything ready to get coding.

现在我们已经准备好开始编码了。

Create two folders srcand dist, so our source tree becomes:

创建两个文件夹srcand dist，所以我们的源代码树变成：

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

2 directories, 2 files

Create a HTML file index.htmlinside the distfolder with the following contents:

index.html在dist文件夹内创建一个 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.jsin the srcfolder with the following contents:

文件夹中还有一个 javascript index.js，src内容如下：

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.htmlreferences a file called main.jswhich does not exist. We need to run webpackto create it:

您可能会注意到dist/index.html引用了一个main.js不存在的名为的文件。我们需要运行webpack来创建它：

npx webpack

Your code should now work. Either open dist/index.htmlmanually, or run a mini-web server from the console to test:

您的代码现在应该可以工作了。要么dist/index.html手动打开，要么从控制台运行一个迷你网络服务器来测试：

(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. Good luck & Have fun!

这应该让你开始你的项目，并且还允许你利用 webpack 的力量来轻松地拆分你的代码。祝你好运&玩得开心！

Good To Know

很高兴知道

The filenames dist/main.jsand src/index.jsare the defaults when running webpackwithout a config
webpackwill create minified code in dist/main.jsby default. This is because it runs in "production" mode by default. To change this, create a file named webpack.config.jswith the following contents:
```
module.exports = {
  mode: 'development'
};
```
You can use it running:
```
npx webpack --config webpack.config.js
```

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

javascript 如何设置 Fabric.js？

提问by Blue_Dragon360

采纳答案by Quentin

回答by Suman Bogati

回答by exhuma

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

很高兴知道

相关推荐

最近更新

标签

javascript 如何设置 Fabric.js？

提问by Blue_Dragon360

采纳答案by Quentin

回答by Suman Bogati

回答by exhuma

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

很高兴知道

相关推荐

javascript 从 XMLHttpRequest send() 捕获异步网络错误

如何从 javascript 运行 php 脚本

如何使用 javascript 或 jQuery 在我的 url 中删除或更改 .html 扩展名？

javascript 如何从键和值中获取javascript对象的路径

相关推荐

最近更新

标签