如何从Canvas对象中去掉边框和角落？[Fabric.js]

Question

我在一个项目中使用了fabric.js，用户可以在画布上绘画，并保存为png图像（使用canvas.toDataURL()函数）。 然而，我们注意到如果用户移动了一个对象并点击保存按钮，它会保存先前移动的对象的边框和角落（当你移动或调整对象时，边框总是显示的）。 因此，我们需要一种在保存之前移除对象边框的方法，这可能吗？

- donkeykong

Answer 1

是的。在保存图像之前，您可能需要停用所有对象：

canvas.deactivateAll().renderAll();

(renderAll 在所有对象停用后更新实际的视觉状态)

- kangax

---

对于新版面料（Fabric），“deactivateAll”不起作用，我们必须使用“discardActiveObject”。 - Anurag pareek

Answer 2

如果您喜欢用户在画布上移动和缩放绘制的路径的想法，我建议您采用kangax的建议。

或者，如果您想稍微改变行为，可以将每个路径元素的hasBorders和hasControls字段设置为false。然后您将永远看不到控件/边框，因此它们永远不会被打印。但这也意味着您无法旋转或缩放路径，但仍然可以移动它们。

或者，您可以更进一步，使路径不可选择（使它们不可移动，这可能是您想要的，也可能不是）。因此，您可以将每个路径的selectable字段设置为false。

为了让所有这些对您更容易，您可以通过在包含fabric.js之后在自己的js文件中添加以下代码来覆盖fabric.js中的_finalizeDrawingPath方法。

fabric.Canvas.prototype._finalizeDrawingPath = function() {

  this.contextTop.closePath();
  this._isCurrentlyDrawing = false;
  var minX = utilMin(this._freeDrawingXPoints),
      minY = utilMin(this._freeDrawingYPoints),
      maxX = utilMax(this._freeDrawingXPoints),
      maxY = utilMax(this._freeDrawingYPoints),
      ctx = this.contextTop,
      path = [ ], xPoint, yPoint,
      xPoints = this._freeDrawingXPoints,
      yPoints = this._freeDrawingYPoints;

  path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' ');
  for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) {
    path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
  }
  path = path.join('');
  if (path === "M 0 0 L 0 0 ") {
    return;
  }

  var p = new fabric.Path(path);
  p.fill = null;
  p.stroke = this.freeDrawingColor;
  p.strokeWidth = this.freeDrawingLineWidth;


  //Tyson Benson: 
  //Add these lines to remove borders/controls
  p.hasBorders = p.hasControls = false;

  //Or add this line to make the path unselectable
  p.selectable = false;


  this.add(p);
  p.set("left", minX + (maxX - minX) / 2).set("top", minY + (maxY - minY) / 2).setCoords();
  this.renderAll();
  this.fire('path:created', { path: p });
};

出于简洁性的考虑，我已删除了一些空格和注释（请参考fabric.js获取这些注释）。

您可以设置p.hasBorders = p.hasControls = false;或p.selectable = false;。您不需要两者都设置。

- Tyson