Fabric.js高级—后端渲染

Fabric高级部分包括：

• 自由涂鸦
• 输出作品
• Fabric on Node.js
• 变换
• 别停止发现

自由涂鸦

Fabric开启自由涂鸦只需：

canvas.isDrawingMode = true

设置笔刷颜色与笔刷粗细：

freeDrawingBrush.color
freeDrawingBrush.width

输出作品

使用 canvas 原生方法输出 base64 编码图像并不是唯一的画布保存方式。

canvas.toDataURL('image/png')

Fabric提供用于保存画布状态：

• canvas.toObject
• canvas.toJSON
• canvas.roDatalessJSON

Fabric亦可将画布输出为svg:

canvas.toSVG()

有输出方式就有输入方式，恢复画布状态只需：

• canvas.loadFromJSON
• canvas.loadFromDatalessJSON

而解析svg只需：

fabric.loadSVGFromURL
fabric.loadSVGFromString

Fabric on Node.js

服务器需建设Nodejs环境，之后即可在项目中安装所需依赖：

npm i fabric

也可全局安装Fabric

npm i -g fabric

Fabric.js入门部分提到过 fabric.StaticCanvas

var fs = require('fs'),
  fabric = require('fabric').fabric, // or import { fabric } from 'fabric';
  canvas = new fabric.StaticCanvas(null, { width: 300, height: 250 });

var font = new fabric.nodeCanvas.Font('Ubuntu', __dirname + '/fonts/Ubuntu-Regular.ttf');
font.addFace(__dirname + '/fonts/Ubuntu-Bold.ttf', 'bold');
font.addFace(__dirname + '/fonts/Ubuntu-Italic.ttf', 'normal', 'italic');
font.addFace(__dirname + '/fonts/Ubuntu-BoldItalic.ttf', 'bold', 'italic');

canvas.contextContainer.addFont(font);  // when using createPNGStream or createJPEGStream

var text = new fabric.Text('regular', {
  left: 150,
  top: 50,
  fontFamily: 'Ubuntu'
});
canvas.add(text);

var out = fs.createWriteStream(__dirname + '/customfont.png');
var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
  out.write(chunk);
});

变换

Canvas.

vieportTransform = matrix;

Objects.

matrix = fabric.Object.prototype.calcTransformMatrix();
matrix = fabric.Object.prototype.calcOwnMatrix();

Utils.

point = fabric.util.transformPoint(point, matrix);
matrix = fabric.util.multiplyTransformMatrices(matrix, matrix);
matrix = fabric.util.invertTransform(matrix);
options = fabric.util.qrDecompose(matrix);