[译] Fabric.js高级—后端渲染

全篇共 1921 字。按500字/分钟阅读,预计用时 3.8 分钟。总访问 1502 次,日访问 4 次。

Fabric.js高级教程包括了在画布上自由涂鸦;从画布输出图像;在Node环境使用Fanric.js;与画布、对象元素矩阵变换相关的工具函数和方法;我认为最值得学习的是在Node环境使用Fabric.js,首先它拓宽了Fabric.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

Node环境使用Fabric

服务器需建设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);
});

矩阵变换

Fabricjs 矩阵变换看这篇文章

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

别停止发现

译者 » 陈帅华
发布日期 » 2019年1月22日 周二
更新日期 » 2020年6月4日 周四
上一篇 » [译] Fabric.js进阶—事件驱动
下一篇 » AirGlass2019封面趋势及新内涵
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录