如何設置角度的文字陰影？

我想讓用戶通過選擇一個輸入字段的偏移量，來自另一個輸入字段的模糊和來自colorpicker的顏色來設置文本陰影。我使用的角度和fabric.js，這是我的HTML：如何設置角度的文字陰影？

<div class="shadow"> 
    <div class="slider-input"> 
     <span>Offset</span> 
     <input min="-25" max="25" step="1" type="number" ng-change="text.setShadow('offset', offset)" ng-model="offset" /> 
    </div> 

    <div class="slider-input"> 
     <span>Blur</span> 
     <input min="0" max="25" step="1" type="number" ng-change="text.setShadow('blur', blur)" ng-model="blur" /> 
    </div> 

    <div class="colorpicker"> 
     <span>Color</span> 
     <input ed-color-picker-disabled="{{ !enableOutline }}" ed-color-picker="text.setShadow('shadowcolor', color)" type="text" /> 
    </div> 
    </div>

在控制器我已經設置這些默認值：

$scope.offset = 0; 
$scope.blur = 0; 
$scope.shadowcolor = '#000';

在服務我設置此功能：

setShadow: function(property, value) { 
    var text = this.getTextObject(); 
    // if (value == 'offset') { 
    //  text.set('shadow', value + 'px' + ' ' + value + 'px') 
    // } 
     console.log("property", property); 
     console.log("value", value); 

    },

問題是，按下我只能得到一個輸入字段或顏色的值，但爲了設置陰影，我還需要知道上下文（其他值）。

如何一次檢索所有的值集合輸入字段，模糊輸入字段和陰影顏色，以便我可以設置文字陰影？

來源

2017-06-04 funguy

可以使用['ng-style']（https：// docs .angularjs.org/api/ng/directive/ngStyle） – charlietfl

在控制器或指令：

$scope.shadow = $scope.offset + "px " + $scope.offset + "px " + $scope.blur + "px " + $scope.color;

（根據需要檢索偏移，模糊，並從您的NG-車型顏色。）

模板：

ng-style="{textShadow: shadow}"

我不我認爲你一定能夠從一次只接收一個（顏色/模糊/偏移）值的服務中完成這項工作。我猜你可以讓服務緩存每個值，因爲它接收每個值，並且只有在將所有三個值都送入服務時才返回text-shadow css - 但這意味着只有單個指令可以使用該服務而不使用值泄漏指令。（老實說，我在質疑爲什麼你首先使用這個服務;這看起來像屬於指令的功能。）

來源

2017-06-04 16:55:02

就像這樣︰$ scope.setShadow = function（property，value）{ var active = canvas.fabric.getActiveObject（）; if（！active.fontFamily）{ return;其他{ $ scope.shadow = $ scope.offset +「px」+ $ scope.offset +「px」+ $ scope.blur +「px」+ $ scope.color; active.set（'shadow'，$ scope.shadow）; \t \t \t canvas.fabric.renderAll（）; } };通過控制器實際上幫助。謝謝！ – funguy

如何設置角度的文字陰影？

回答

相關問題