Question

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

在控制器中我设置了这些默认值：

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

  },

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

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

Answer 1

在控制器或指令中：

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

（根据需要从ng模型中检索偏移，模糊和颜色。）

模板中的

：

ng-style="{textShadow: shadow}"

我认为您无法从一次只接收其中一个（颜色/模糊/偏移）值的服务中干净地完成此操作。我猜你可以让服务缓存每个值，因为它接收每个值，并且只有当所有三个值都被送到服务时才返回text-shadow css - 但这意味着只有一个指令可以使用没有值的服务泄漏指令。（老实说，我正在质疑你为什么要首先使用服务;这看起来像是指令中的功能。）

如何用angular设置文本阴影？

1 个答案: