4

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

4

2 回答 2

13

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

canvas.deactivateAll().renderAll();

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

于 2012-02-06T22:43:19.130 回答
0

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

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

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

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

于 2012-04-08T10:52:49.703 回答