如何从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覆盖_finalizeDrawingPath，在你自己的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;。你不需要两个。