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

时间:2016-11-05 19:35:39

标签: javascript canvas

我尝试为用作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();
}

1 个答案:

答案 0 :(得分:0)

在函数obj.setStroke("black"); obj.setStrokeWidth(5); obj.setStrokeLineJoin("round"); // use round to stop corners creating spurs 中添加文本对象的这3个属性,它将概述文本。

for(i=1; i<101; i++) {
    if(i % 3 === 0) {
        console.log("Fizz");
    } else if(i % 5 === 0) {
        console.log("Buzz");
    } else if (i % 3 === 0 && i % 5 === 0){
        console.log("FizzBuzz");
    } else {
        console.log("What should this be?");
    }
}