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

【问题标题】：fabric.js - kitchensink - refresh object controls when selecting objectfabric.js - kitchensink - 选择对象时刷新对象控件
【发布时间】：2018-02-01 01:02:04
【问题描述】：

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

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

到目前为止一切顺利。

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

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

谢谢！！

【问题讨论】：

找到了以下帮助但不是 100% 我正在寻找的内容：canvas.on('selection:updated', function(e) { canvas.discardActiveObject(); });
IIRC，kitchensink 是用古老版本的 AngularJS 编写的，它将fabric.js API 调用绑定到 angular.js 摘要循环，类似于$scope.$apply。所以，我会尝试找到那些角度绑定，然后看看他们在听什么 fabric.js 函数。只需寻找事件，您对控制器感兴趣：fabricjs.com/js/kitchensink/controller.js

标签： javascript fabricjs

【解决方案1】：

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

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

让我们在http://fabricjs.com/js/kitchensink/controller.js 中找到这个getText() 函数。事实证明，它使 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 中文本区域的内容是使用来自http://fabricjs.com/js/kitchensink/app_config.js 的bind-value-to="text" 指令：

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

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

【讨论】：