Question

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

Answer 1

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

canvas.deactivateAll().renderAll();

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

Answer 2

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

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

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

为了让您更轻松，您可以覆盖fabric.js中的_finalizeDrawingPath，方法是在包含fabric.js之后在您自己的js文件中添加以下代码

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;。你不需要两者。

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

2 个答案: