1. 介绍
Fabric.js —一个功能强大的Javascript库,使使用HTML5 canvas的工作变得轻而易举。 Fabric提供了画布缺少的对象模型,以及SVG解析器,交互性层和一整套其他必不可少的工具。这是一个完全开放源代码的项目,已获得麻省理工学院(MIT)的许可,多年来有许多贡献。
在发现使用原生canvas API的烦恼之后,Fabric于2010年左右开始。最初的作者正在为printio.ru创建一个交互式设计编辑器-他的创业公司允许用户设计自己的服装。他们想要的那种交互性仅在那时存在于Flash应用程序中。即使是现在,也很少有人能接近Fabric所能提供的功能。
2. 什么是Fabric
Canvas允许我们在网络上创建一些绝对惊人的图形。但是它提供的API是极令人失望地低级。如果我们只是想在画布上绘制一些基本形状而忘记它们,那是一回事。但是,只要需要进行任何形式的交互,随时更改图片或绘制更复杂的形状,情况就会发生巨大变化。
Fabric旨在解决这个问题。
原生canvas方法仅允许我们触发简单的图形命令,盲目地修改整个画布位图。想画一个矩形吗?使用fillRect(left,top,width,height)。要画一条线吗?使用moveTo(left,top)和lineTo(x,y)的命令组合。就像我们正在用刷子画画布一样,在很少的控制下将越来越多的油层涂在上面。
Fabric没有在如此低的级别上进行操作,而是在原生canvas方法之上提供了简单但功能强大的对象模型。它负责画布的状态和渲染,并让我们直接使用“对象”。
3. 原生对比使用
原生canvans
<template>
<div class="app">
<canvas id="canvas" width="300" height="200"></canvas>
</div>
</template>
<script>
export default {
mounted() {
var canvasEl = document.getElementById("canvas");
canvasEl.style.background = 'grey'
var ctx = canvasEl.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(100,100,20,20);
},
};
</script>
Fabric进行相同的操作
<template>
<div class="app">
<canvas id="canvas" width="300" height="200"></canvas>
</div>
</template>
<script>
import {fabric} from "fabric"
export default {
mounted(){
var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
var rect = new fabric.Rect({
left:100,
top:100,
fill:"red",
width:20,
height:20,
});
canvas.add(rect);
}
}
</script>