Canvas 在GitHub上点星最高的框架Fabricjs 第一弹

Canvas 在GitHub上点星最高的框架Fabricjs 第一弹

@(前端)[canvas框架, Fabricjs, 基本]

1、简介

Fabric是一个强大而简单的JS Canvas库，我们能通过使用它实现在Canvas上创建、填充图形、给图形填充渐变颜色。 组合图形（包括组合图形、图形文字、图片等）等一系列功能。简单来说我们可以通过使用Fabric从而以较为简单的方式实现较为复杂的Canvas功能

官网文档地址：http://fabricjs.com/docs/
github地址：https://github.com/fabricjs/fabric.js
Demo地址：http://fabricjs.com/demos/

2、基础

1、生成基础

<canvas id="canvas" width="350" height="200"></canvas>

const card = new fabric.Canvas('canvas') 

// ...这里可以写canvas对象的一些配置，后面将会介绍
 
// 如果<canvas>标签没设置宽高，可以通过js动态设置
card.setWidth(350)
card.setHeight(200)

就是这么简单，这样就创建了一个基本的画布。

2、添加背景

//动态改变画布颜色
const card = new fabric.Canvas('canvas', {
  backgroundColor: 'blue' // 画布背景色为蓝色
});
 
// 或者
card.backgroundColor = 'blue';
 
// 或者
card.setBackgroundColor('blue');

// 读取图片地址，设置画布背景
fabric.Image.fromURL('xx/xx/bg.jpg', (img) => {
  img.set({
   // 通过scale来设置图片大小，这里设置和画布一样大
    scaleX: card.width / img.width,
    scaleY: card.height / img.height,
  });
  // 设置背景
  card.setBackgroundImage(img, card.renderAll.bind(card));
  card.renderAll();
});

3、添加图层控件

fabric.js提供了很多对象，除了基本的 Rect，Circle，Line，Ellipse，Polygon，Polyline，Triangle对象外，还有如 Image，Textbox，Group等更高级的对象，这些都是继承自Fabric的Object对象。
下面我就介绍如何添加图片和文字，其他对象大同小异

• 添加普通元素

  var canvas = this.__canvas = new fabric.StaticCanvas('c');

  canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),//矩形
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),//圆形
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })//三角形
  );

• 添加图片元素

/**
* 如何向画布添加一个Image对象？
*/ 
// 方式一（通过img元素添加）
const imgElement = document.getElementById('my-image');
const imgInstance = new fabric.Image(imgElement, {
  left: 100, // 图片相对画布的左侧距离
  top: 100, // 图片相对画布的顶部距离
  angle: 30, // 图片旋转角度
  opacity: 0.85, // 图片透明度
  // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
  scaleX: 0.5, 
  scaleY: 0.5
});

card.add(imgInstance);



// 方式二（通过图片路径添加）
fabric.Image.fromURL('xx/xx/vue-logo.png', (img) => {
  img.set({
    hasControls: false, // 是否开启图层的控件
    borderColor: 'orange', // 图层控件边框的颜色
  });
  // 添加对象后, 如下图
  canvas.add(img);
});

• 3、添加文字元素

/**
* 如何向画布添加一个Textbox对象？
*/
 
const textbox = new fabric.Textbox('这是一段文字', {
    left: 50,
    top: 50,
    width: 150,
    fontSize: 20, // 字体大小
    fontWeight: 800, // 字体粗细
    // fill: 'red', // 字体颜色
    // fontStyle: 'italic',  // 斜体
    // fontFamily: 'Delicious', // 设置字体
    // stroke: 'green', // 描边颜色
    // strokeWidth: 3, // 描边宽度
    hasControls: false,
    borderColor: 'orange',
    editingBorderColor: 'blue' // 点击文字进入编辑状态时的边框颜色
});

card.add(textbox);