Vue + fabric.js构建标注工具：从细节入手，掌握关键

2023-11-01 12:58:14

在上篇文章中，我们对使用Vue + fabric.js构建标注工具的流程进行了大致介绍，而在本文中，我们将更加深入地探讨一些细节，以及在使用fabric.js过程中遇到的常见问题和解决办法。

鼠标从右向左画框

在上篇教程中，我们介绍了如何在canvas上画框，但当时我们假设鼠标总是从左向右画框。然而，在实际使用中，我们可能需要支持从右向左画框的情况。要实现这一点，我们可以使用fabric.js提供的setDirection()方法。例如：
```
rect.setDirection('rtl');
```
这样，当我们在canvas上画框时，无论鼠标是从左向右还是从右向左，画出的框都会是正确的方向。
实时显示画框

为了使画框能够实时显示在canvas上，我们需要在fabric.js中添加一个监听器，来监听画布上的鼠标事件。当鼠标移动时，我们可以通过监听器来更新画框的位置和大小。例如：
```
canvas.on('mouse:move', function(e) {
  if (isDrawing) {
    rect.set({
      width: e.pointer.x - rect.left,
      height: e.pointer.y - rect.top
    });
  }
});
```
这样，当鼠标移动时，画框就会实时更新位置和大小。
键盘事件处理

除了鼠标事件之外，我们还需要处理键盘事件，以便用户能够通过键盘来控制画框。例如，我们可以使用键盘上的箭头键来移动画框，或者使用键盘上的Delete键来删除画框。为了实现这一点，我们可以使用fabric.js提供的on()方法来监听键盘事件。例如：
```
canvas.on('keydown', function(e) {
  switch (e.key) {
    case 'ArrowUp':
      rect.top -= 10;
      break;
    case 'ArrowDown':
      rect.top += 10;
      break;
    case 'ArrowLeft':
      rect.left -= 10;
      break;
    case 'ArrowRight':
      rect.left += 10;
      break;
    case 'Delete':
      canvas.remove(rect);
      break;
  }
});
```
这样，当用户按下键盘上的箭头键时，画框就会相应地移动。当用户按下Delete键时，画框就会被删除。
撤销和重做

为了方便用户操作，我们需要在标注工具中添加撤销和重做功能。要实现这一点，我们可以使用fabric.js提供的undo()和redo()方法。例如：
```
canvas.undo();
canvas.redo();
```
这样，当用户点击撤销按钮时，画框就会撤销到上一步的状态。当用户点击重做按钮时，画框就会重做到下一步的状态。
坐标转换

在使用fabric.js时，我们需要经常在canvas坐标系和页面坐标系之间转换坐标。例如，当我们需要在canvas上画一个框时，我们需要将鼠标的页面坐标转换为canvas坐标。而当我们需要将画框保存到数据库时，我们需要将画框的canvas坐标转换为页面坐标。要实现这一点，我们可以使用fabric.js提供的toLocalPoint()和toCanvasPoint()方法。例如：
```
var point = canvas.toLocalPoint(new fabric.Point(x, y));
var point = canvas.toCanvasPoint(new fabric.Point(x, y));
```
这样，我们就可以在canvas坐标系和页面坐标系之间自由转换坐标了。
数据保存

最后，我们需要将画框数据保存到数据库中。要实现这一点，我们可以使用fabric.js提供的toJSON()方法来将画框数据转换为JSON字符串。然后，我们可以将JSON字符串保存到数据库中。例如：
```
var json = canvas.toJSON();
$.ajax({
  url: '/save_data',
  type: 'POST',
  data: {
    json: json
  },
  success: function(data) {
    alert('数据保存成功');
  }
});
```
这样，我们就将画框数据保存到了数据库中。

数据导出

除了保存数据之外，我们还需要能够将数据导出为各种格式，以便用户能够在其他软件中使用这些数据。要实现这一点，我们可以使用fabric.js提供的toSVG()、toPNG()和toJPEG()方法来将画框数据导出为SVG、PNG和JPEG格式。例如：

canvas.toSVG(function(svg) {
  var blob = new Blob([svg], {type: 'image/svg+xml'});
  var url = URL.createObjectURL(blob);
  window.open(url);
});

canvas.toPNG(function(png) {
  var blob = new Blob([png], {type: 'image/png'});
  var url = URL.createObjectURL(blob);
  window.open(url);
});

canvas.toJPEG(function(jpeg) {
  var blob = new Blob([jpeg], {type: 'image/jpeg'});
  var url = URL.createObjectURL(blob);
  window.open(url);
});