JavaScript 캔버스의 텍스트에 테두리 추가

Question

javascript 캔버스로 사용되는 텍스트의 자동 테두리를 추가하려고합니다. strokeText, strokeStyle 및 이와 유사한 옵션을 시도했지만 입력 한 텍스트에 테두리가 있음을 확인할 수 없습니다.

이있다 "AddText"버튼 코드 :

$scope.addText = function() { 
    if (canvas.getActiveObject() && canvas.getActiveObject().type == 'text') { 
     applyTextStylesSelection(); 
    } 
    else { 
     var obj = applyTextStyles(new fabric.Text($scope.text.text)); 
     obj.setLeft(canvas.getWidth()/2); 
     obj.setTop(canvas.getHeight()/2); 
     canvas.add(obj); 
    } 

    $('#meme-text-modal').hide(); 
}; 

이 컨트롤에 입력 한 텍스트를 포맷 코드 (사용자가 선택되어 굵은 글꼴 및 글꼴 크기와 같은 서식하지만, 내가하고 싶습니다이다 필수 텍스트 테두리

function applyTextStylesSelection() { 
    if ($scope.selection && $scope.selection.type == 'text') { 
     applyTextStyles($scope.selection); 
     canvas.renderAll(); 
    } 
} 

function applyTextStyles(obj) { 
    obj.setText($scope.text.text);  
    obj.setFontFamily($scope.text.fontFamily); 
    obj.setFontSize($scope.text.fontSize);  
    obj.setFontWeight($scope.text.textStyle.b ? 'bold' : 'normal'); 
    obj.setTextDecoration($scope.text.textStyle.u ? 'underline' : ''); 
    obj.setFontStyle($scope.text.textStyle.i ? 'italic' : ''); 
    obj.setFill($scope.fgColor); 

    return obj; 
} 

function loadSelectedTextOptions() { 
    var obj = canvas.getActiveObject(); 
    $scope.text.text = obj.getText(); 
    $scope.text.fontFamily = obj.getFontFamily(); 
    $scope.text.fontSize = obj.getFontSize(); 
    $scope.text.textStyle.b = obj.getFontWeight() == 'bold' ? true : false; 
    $scope.text.textStyle.u = obj.getTextDecoration() == 'underline' ? true : false; 
    $scope.text.textStyle.i = obj.getFontStyle() == 'italic' ? true : false; 
    $scope.fgColor = obj.getFill(); 
    $scope.$digest(); 
} 

Answer 1

함수 applyTextStyles의 텍스트 개체의이 3 곳을 추가하고 텍스트를 개설 할 것이다.

obj.setStroke("black");  
obj.setStrokeWidth(5); 
obj.setStrokeLineJoin("round"); // use round to stop corners creating spurs