Canvas 객체에서 테두리와 모서리를 제거하는 방법은 무엇입니까? [Fabric.js]

Question

저는 하나의 프로젝트에서 fabric.js를 사용합니다. 여기에서 사용자는 캔버스에 그릴 수 있고 canvas.toDataURL() 함수를 사용하여 png 이미지에 저장할 수 있습니다. 그러나 사용자가 개체를 이동하고 저장 버튼을 클릭하면 이전에 이동 한 개체의 테두리와 모서리가 저장됩니다 (개체를 이동하거나 크기를 조정할 때 테두리가 항상 표시됨). 저장하기 전에 개체 테두리를 제거하는 방법이 필요합니다.

Answer 1

예. 당신은 이동 경로가 그려진 스케일링 사용자의 아이디어를 좋아하는 경우에

canvas.deactivateAll().renderAll(); 

(renderAll 모든 오브젝트의 비활성화 후 실제 시각적 상태를 업데이트)

Answer 2

: 당신은 아마 이미지를 저장하기 전에 모든 개체를 비활성화 할 캔버스. 나는 kangax의 제안과 함께 갈 것입니다.

또는 동작을 약간 변경하려는 경우 각 경로 요소의 hasBorders 및 hasControls 필드를 false로 설정할 수 있습니다. 그렇다면 컨트롤/테두리를 볼 수 없으므로 절대로 인쇄 할 수 없습니다. 그러나 경로를 회전하거나 비율을 조정할 수는 없지만 이동시킬 수는 있습니다.

또는 한 걸음 더 나아가 경로를 선택 불가능하게 만들 수 있습니다 (이동할 수 없도록 만들 수도 있고 원치 않을 수도 있습니다). 따라서 각 경로의 selectable 필드를 false로 설정할 수 있습니다. 당신이 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 }); 
}; 

을 포함 후에

내가 약간의 공백을 제거한 자신의 js 파일에 다음 코드를 추가하여, fabric.js에서 _finalizeDrawingPath을 무시할 수 당신이 모든 것을 쉽게 만들려면 간결함을위한 설명 (이 주석에 대해서는 fabric.js를 참조하십시오).

p.hasBorders = p.hasControls = false; 또는 p.selectable = false;을 설정할 수 있습니다. 둘 다 필요 없다.