Fabric.js - 轻而易举操作canvas的神奇库

2021-11-15


// 获取画布的引用
var canvasEl = document.getElementById('c');
// 获取2d context 对象 用来操作 (之前提到的bitmap)
var ctx = canvasEl.getContext('2d');
// 给当前上下文设置颜色
ctx.fillStyle = 'red';
// 在100, 100的位置创建一个20*20的矩形
ctx.fillRect(100, 100, 20, 20);
现在，让我们看看fabricjs怎么实现同样的效果:
// 包裹一下canvas (with id="c")
var canvas = new fabric.Canvas('c');
// 新建一个矩形对象
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
// 将矩形添加到canvas里
canvas.add(rect);

var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);
接下来使用fabric:
var canvas = new fabric.Canvas('c');
// create a rectangle with angle=45
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
  angle: 45
canvas.add(rect);


var canvasEl = document.getElementById('c');
ctx.strokRect(100, 100, 20, 20);
// 清除整个画布
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.fillRect(20, 50, 20, 20);
用fabric怎么实现?
var canvas = new fabric.Canvas('c');
canvas.add(rect);
rect.set({ left: 20, top: 50 });
canvas.renderAll();


var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
canvas.add(circle, triangle);

var canvas = new fabric.Canvas('c');
canvas.add(rect);
rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);

var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });
// 一样的
var rect = new fabric.Rect();
rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });


fabric.Object.prototype.getAngleInRadians = function() {
  return this.get('angle') / 180 * Math.PI;
var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true


var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // 添加进去
canvas.item(0); //  获取刚才添加的fabric.Rect
canvas.getObjects(); // 获取画布中所有的对象
canvas.remove(rect); // 删除fabric.Rect

var canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
  // ...
// or
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://...');
canvas.onFpsUpdate = function(){ /* ... */ };
// ...


var canvas = new fabric.Canvas('c');
canvas.selection = false; // 关闭群选
rect.set('selectable', false); // 单个对象不可选


var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
  new fabric.Rect({
    width: 10, height: 20,
    left: 100, top: 100,
    fill: 'yellow',
    angle: 30
  }));

<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
canvas.add(imgInstance);

fabric.Image.fromURL('my_image.png', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).set('flipX', true);
  canvas.add(oImg);
});


var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);


var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);


var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\