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

Question

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

Answer 1

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

canvas.deactivateAll().renderAll();

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

Answer 2

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

或者，如果您想稍微改变行为，则可以将每个路径元素上的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;。您不需要两者。

Answer 3

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