Adding a Border to Text on an JavaScript Canvas -
i'm trying add automatic border text used javascript canvas. i've tried options stroketext, strokestyle , similar, can't make entered text had border.
this "addtext" button code:
$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(); };
this code formats text entered in control (formatting bolding , font size selected user, make text border mandatory
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(); }
add these 3 properties of text object in function applytextstyles
, outline text.
obj.setstroke("black"); obj.setstrokewidth(5); obj.setstrokelinejoin("round"); // use round stop corners creating spurs
Comments
Post a Comment