用Fabric.js打造自定义书写和轨迹采集应用程序

使用 Fabric.js 创建自定义书写和轨迹采集应用程序

1. 初始化 Fabric.js 画布

Fabric.js 是一个用于在 Web 上创建和操作画布的开源 JavaScript 库。在初始化画布时，您可以指定画布 ID 或 DOM 元素。

var canvas = new fabric.Canvas('canvas');

2. 配置画笔颜色和粗细

画笔由画笔类型、颜色和粗细等属性定义。使用以下代码自定义画笔：

var brush = new fabric.PencilBrush();
brush.color = 'red';
brush.width = 5;

3. 通过手势生成实际轨迹

要通过手势绘制轨迹，您需要监听鼠标事件并根据这些事件更新画布上的路径。

canvas.on('mouse:down', function(e) {
  var path = new fabric.Path();
  path.path = [e.pointer.x, e.pointer.y];
  path.stroke = brush.color;
  path.strokeWidth = brush.width;
  canvas.add(path);
});

canvas.on('mouse:move', function(e) {
  var path = canvas.getActiveObject();
  path.path.push(e.pointer.x, e.pointer.y);
  path.set('dirty', true);
});

canvas.on('mouse:up', function(e) {
  canvas.getActiveObject().set({
    stroke: 'black',
    strokeWidth: 1
  });
});

4. 通过手势来圈选轨迹

类似地，要圈选轨迹，您可以监听鼠标事件并使用矩形对象来跟踪选定区域。

canvas.on('mouse:down', function(e) {
  var rect = new fabric.Rect({
    left: e.pointer.x,
    top: e.pointer.y,
    width: 0,
    height: 0,
    stroke: 'red',
    strokeWidth: 1,
    fill: 'transparent'
  });

  canvas.add(rect);
});

canvas.on('mouse:move', function(e) {
  var rect = canvas.getActiveObject();
  rect.set({
    width: e.pointer.x - rect.left,
    height: e.pointer.y - rect.top
  });
  rect.set('dirty', true);
});

canvas.on('mouse:up', function(e) {
  var rect = canvas.getActiveObject();
  rect.set({
    stroke: 'black',
    strokeWidth: 1
  });
});

5. 撤销和删除轨迹

为了提供撤销和删除功能，您需要使用堆栈来存储操作历史记录。

var undoStack = [];

function undo() {
  if (undoStack.length > 0) {
    var object = undoStack.pop();
    canvas.remove(object);
  }

  updateUndoRedoButtons();
}

function deleteObject() {
  var object = canvas.getActiveObject();
  canvas.remove(object);

  updateUndoRedoButtons();
}

function updateUndoRedoButtons() {
  var undoButton = document.getElementById('undo-button');
  undoButton.disabled = undoStack.length === 0;

  var deleteButton = document.getElementById('delete-button');
  deleteButton.disabled = canvas.getActiveObject() === null;
}

6. 操作轨迹

要对轨迹进行缩放、旋转或移动，您需要监听对象选择事件并更新对象的属性。

canvas.on('object:selected', function(e) {
  var object = e.target;

  var scaleXInput = document.getElementById('scaleX-input');
  scaleXInput.value = object.scaleX;

  var scaleYInput = document.getElementById('scaleY-input');
  scaleYInput.value = object.scaleY;

  var angleInput = document.getElementById('angle-input');
  angleInput.value = object.angle;

  var leftInput = document.getElementById('left-input');
  leftInput.value = object.left;

  var topInput = document.getElementById('top-input');
  topInput.value = object.top;
});

function scaleX(value) {
  var object = canvas.getActiveObject();
  object.scaleX = value;
  object.set('dirty', true);
}

function scaleY(value) {
  var object = canvas.getActiveObject();
  object.scaleY = value;
  object.set('dirty', true);
}

function rotate(value) {
  var object = canvas.getActiveObject();
  object.angle = value;
  object.set('dirty', true);
}

function moveX(value) {
  var object = canvas.getActiveObject();
  object.left = value;
  object.set('dirty', true);
}

function moveY(value) {
  var object = canvas.getActiveObject();
  object.top = value;
  object.set('dirty', true);
}

7. 缩放和拖动背景网格

要添加背景网格并允许缩放和拖动，您需要使用 Fabric.js 的网格对象。

var grid = new fabric.Grid({
  cellSize: 10,
  color: 'lightgray',
  strokeWidth: 1,
  strokeDashArray: [2, 2]
});

canvas.add(grid);

canvas.on('mouse:wheel', function(e) {
  var zoom = canvas.getZoom();
  zoom *= e.e.deltaY > 0 ? 1.1 : 0.9;
  canvas.setZoom(zoom);
  canvas.renderAll();
});

canvas.on('mouse:down', function(e) {
  if (e.altKey) {
    canvas.isDragging = true;
    canvas.selection = false;
    canvas.lastPosX = e.pointer.x;
    canvas.lastPosY = e.pointer.y;
  }
});

canvas.on('mouse:move', function(e) {
  if (canvas.isDragging) {
    var deltaX = e.pointer.x - canvas.lastPosX;
    var deltaY = e.pointer.y - canvas.lastPosY;

    canvas.viewportTransform[4] += deltaX;
    canvas.viewportTransform[5] += deltaY;

    canvas.renderAll();

    canvas.lastPosX = e.pointer.x;
    canvas.lastPosY = e.pointer.y;
  }
});

canvas.on('mouse:up', function(e) {
  canvas.isDragging = false;
  canvas.selection = true;
});

结论

使用 Fabric.js，您可以创建强大且灵活的自定义书写和轨迹采集应用程序。这些应用程序可以用于各种场景，例如电子签名、手写笔记和图像编辑。

常见问题解答

1. 什么是 Fabric.js？
   Fabric.js 是一个 JavaScript 库，用于在 Web 上创建和操作画布。
2. 如何初始化 Fabric.js 画布？
   使用 new fabric.Canvas('canvas')，其中 'canvas' 是 DOM 元素 ID。
3. 如何使用 Fabric.js 绘制轨迹？
   通过监听鼠标事件并使用 fabric.Path 对象创建和更新路径来实现。
4. 如何撤销或删除轨迹？
   使用堆栈存储操作历史记录，然后使用撤销和删除函数从画布中删除对象。
5. 如何在 Fabric.js 中操作轨迹？
   通过监听对象选择事件并更新对象的属性来实现，如缩放、旋转和移动。