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

Question

我在一个项目中使用fabric.js，用户可以在画布上绘制，并保存到 png 图像（使用 canvas.toDataURL() 函数）。 但是，我们注意到如果用户移动对象并单击“保存”按钮，它会保存先前移动对象的边框和角（当您移动或调整对象大小时，边框始终显示）。 所以我们需要一种在保存之前移除对象边框的方法，这可能吗？

Answer 1

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

canvas.deactivateAll().renderAll();

（ renderAll在停用所有对象后更新实际视觉状态）

Answer 2

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

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

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

为了让您更轻松地完成所有这一切，您可以在包含 fabric.js 后通过在您自己的 js 文件中添加以下代码来覆盖_finalizeDrawingPath _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; . 你不需要两者。

Answer 3

oImg =  canvas.getActiveObject();
oImg.hasBorders = false;
oImg.hasControls = false;
canvas.renderAll();