如何用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>

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

$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}"

我认为您无法通过一次仅接收其中一个（颜色/模糊/偏移）值的服务干净地执行此操作。我想您可以让服务在接收到每个值时缓存每个值，并且只有 return text-shadow css 当所有三个值都被提供给服务时——但这意味着只有单个指令可以使用该服务而不会跨指令泄漏值。（老实说，我在质疑你为什么首先为此使用服务；这似乎是指令中的功能。）

如何用angular设置文字阴影？

how to set text shadow with angular?

javascript

canvas

fabricjs

angularjs