在JavaScript画布上向文本添加边框

我正在尝试添加用作javascript画布的文本的自动边框。我尝试了像strokeText，strokeStyle和类似的选项，但我不能让输入的文本有边界。在JavaScript画布上向文本添加边框

这是“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(); 
}

来源

2016-11-05 Michal

在功能applyTextStyles添加文本对象的这3个属性，它会勾勒出文字。

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

来源

2016-11-06 09:35:20 Blindman67

在JavaScript画布上向文本添加边框

回答

相关问题