javascript - fabric.js - kitchensink - 选择对象时刷新对象控件

Question

拉起厨房水槽。选择左侧的 i-text 对象“lorem ipsum”并点击“对象”选项卡: http://fabricjs.com/kitchensink

您会注意到“文本特定控件”反射(reflect)了 i-text 对象的内容。现在单击 Canvas 背景(从而取消选择对象)，最后单击右侧的“foo bar”i-text 对象。文本控件再次反射(reflect) i-text 对象的内容。

到目前为止一切顺利。

我不明白的是，当您在没有先单击 Canvas 背景的情况下单击另一个 i-text 对象时，为什么控件不会更新。除非您单击 i-text 对象，否则控件似乎仍锁定在第一个对象上。事实上，您可以在文本区域中输入一些文本，然后选择另一个 i-text 对象来替换全部内容。

在 i-text 对象之间切换时，如何清除文本控件中的先前选择？

谢谢!!

Answer 1

Kitchensink 是用古老的 Angular.js 1.2 编写的。

所以，如果您点击您的 text specific controls在 Chrome 开发者工具中的 DOM 元素，你会看到它的 html 代码是:<div id="text-wrapper" ng-show="getText()"> .

让我们找到这个 getText()在 http://fabricjs.com/js/kitchensink/controller.js 中发挥作用.事实证明，它使 angular.js 摘要循环监听 fabric.js API 调用(第 108-113 行):

$scope.getText = function() {
  return getActiveProp('text');
};
$scope.setText = function(value) {
  setActiveProp('text', value);
};

因此，要刷新文本特定控件中的文本，显然，您需要调用 Fabric 的 setActiveProp('text', value)切换到其他文本时。

text-specific-controls中文本区域的内容正在使用 bind-value-to="text"来自 http://fabricjs.com/js/kitchensink/app_config.js 的指令:

kitchensink.directive('bindValueTo', function() {
  return {
    restrict: 'A',

    link: function ($scope, $element, $attrs) {

      var prop = capitalize($attrs.bindValueTo),
          getter = 'get' + prop,
          setter = 'set' + prop;

      $element.on('change keyup select', function() {
        if ($element[0].type !== 'checkbox') {
          $scope[setter] && $scope[setter](this.value);
        }
      });

      $element.on('click', function() {
        if ($element[0].type === 'checkbox') {
          if ($element[0].checked) {
            $scope[setter] && $scope[setter](true);
          }
          else {
            $scope[setter] && $scope[setter](false);
          }
        }
      })

      $scope.$watch($scope[getter], function(newVal) {
        if ($element[0].type === 'radio') {
          var radioGroup = document.getElementsByName($element[0].name);
          for (var i = 0, len = radioGroup.length; i < len; i++) {
            radioGroup[i].checked = radioGroup[i].value === newVal;
          }
        }
        else if ($element[0].type === 'checkbox') {
          $element[0].checked = newVal;
        }
        else {
          $element.val(newVal);
        }
      });
    }
  };
});

该指令只监视绑定(bind)属性的 getter 和 setter(在我们的例子中，绑定(bind)属性是文本，因此它监视 getText()/setText() 并反射(reflect) UI 中的任何更改。