JavaScriptキャンバス上のテキストに枠線を追加する

Question

javascript canvasとして使用されるテキストの自動枠線を追加しようとしています。私は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