javascript - 如何设置带 Angular 文本阴影？

Question

我想让用户通过从一个输入字段选择偏移量、从另一个输入字段选择模糊以及从颜色选择器选择颜色来设置文本阴影。我正在使用 Angular 和 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>

在 Controller 中我设置了这些默认值:

$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);

  },

问题是，在按下时我只能获得一个输入字段或颜色的值，但为了设置阴影，我也需要知道上下文(其他值)。

如何一次检索所有值 - ofsset 输入字段、模糊输入字段和阴影颜色，以便我可以设置文本阴影？

Answer 1

在 Controller 或指令中:

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

(根据需要从 ng-model 中检索偏移、模糊和颜色。)

在模板中:

ng-style="{textShadow: shadow}"

我认为您无法通过一次仅接收其中一个(颜色/模糊/偏移)值的服务来干净地完成此操作。我猜你可以让服务在接收每个值时缓存每个值，并且仅在所有三个值都已提供给服务时才返回文本阴影 css - 但这意味着只有一个指令可以在没有值的情况下使用该服务跨指令泄漏。 (老实说，我首先质疑为什么您要为此使用服务；这似乎是属于指令的功能。)