发布日期 » 2019年1月22日 星期二

作者署名 » 陈帅华

原创声明 » 署名-非商业性使用-相同方式共享

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);