Blu*_*360 8 html javascript canvas fabricjs
我刚开始研究使用fabric.js,而且我发现很少有关于如何在我的网站上安装它的资源.我只能找到一个引用文件"all.min.js"的堆栈溢出问题,该文件在快速搜索解压缩文件后不再存在.
我在过去的几个小时里搜索过互联网,看起来它应该是常识!我仍然被困住了.
我应该在HTML中链接哪个文件？
编辑:为了澄清,我从fabric.js的github上下载了一个大的ZIP文件.我很困惑我应链接到哪个文件以包含库.
Sum*_*ati 11
所有你需要从HERE下载fabric.js 并将其保存为js文件命名fabric.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>
选项
您可以fabric.js从这里以任何格式下载
fabric.js 不需要致力于版本控制package.json只需两个命令即可从头开始并运行：git clone <url>和npm installnpm update假设...
>= 5.2（如果我没记错的话，webpack需要此功能）。npm和webpack命令。$HOME/.local/bin在* nix系统上注意：您将不会需要在系统超级用户/ 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上面的两个命令将填充package.json包含生产（fabricjs）和开发（webpack＆webpack-cli）依赖关系的文件。
注意：在安装webpack时，cairo在撰写本文时出现错误。但是看来它们是无害的。cairo是一个图形库，我认为只有在要fabricjs在nodejs进程中运行时才需要。浏览器已经能够渲染图形，因此当fabricjs以客户端代码运行时，这不是问题。否则，您可能需要安装所需的标头。我假设（未经测试）可以通过在libcairo-dev基于debian的系统上安装软件包来解决此错误。
现在，我们已经准备好进行编码的一切。
创建两个文件夹src和dist，因此我们的源树变为：
.
??? node_modules
| ?...
| ??? ...
??? dist
??? package-lock.json
??? package.json
??? src
2 directories, 2 files
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>
而且一个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();
这将为我们提供以下目录结构：
.
??? 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是默认值webpackwebpackdist/main.js默认情况下将在其中创建缩小的代码。这是因为默认情况下它以“生产”模式运行。要更改此设置，请创建一个webpack.config.js包含以下内容的文件：
module.exports = {
mode: 'development'
};
您可以使用它运行：
npx webpack --config webpack.config.js
| 归档时间： |
|
| 查看次数： |
10657 次 |
| 最近记录： |