Question

我正在尝试动态设置direction，但有些东西无效。我没有收到错误。

function moveSelection(keyPressed) {
    var group = canvas.getActiveGroup(),
    obj = canvas.getActiveObject();

    if(!group && !obj) {return;}

    var direction = '',
        sign = '',
        operators = {
            '+': function(a, b) { return a + b },
            '-': function(a, b) { return a - b },
        };
    switch(keyPressed) {
        case 37:
            direction = 'left';
            sign = '-';
        break;
        case 38:
            direction = 'top';
            sign = '-';
        break;
        case 39:
            direction = 'right';
            sign = '+';
        break;
        case 40:
            direction = 'bottom';
            sign = '+';
        break;
    }

    if(group){
        group.set({
            direction : operators[sign](group.get(direction), 1)
        });
        canvas.renderAll();
    } else {
      obj.set({
        direction : operators[sign]( obj.get(direction),1 )
      });
      canvas.renderAll();
    }
}

但是，当我将代码更改为以下时，它工作正常..有什么问题？谢谢你：

obj.set({
    'left' : operators[sign]( obj.get(direction),1 )
});

Answer 1

TLDR

使用obj.set(direction, ...)。

但为什么？

我自己被这几次咬过。即使在知道它不应该起作用之后：）

但这就是Javascript的工作方式：

在您的代码段中，对象文字中的“方向”被解释为“方向”属性：

obj.set({
  direction : operators[sign]( obj.get(direction),1 )
});

就像这个对象文字中的foo一样：

var foo = 'x';
var obj = { foo: 'bar' };

创建名为“foo”的属性，而不是名为“x”的属性（foo 变量“包含”）。

这可能看起来有点奇怪，因为你不是在写：

var obj = { 'foo': 'bar' };

其中foo被写为字符串文字而不是标识符。但是对于Javascript（直到ECMAScript 5），它并不重要。唯一的区别是使用标识符表示法，您只能表示同样有效的属性...标识符。

因此，例如，这些作为标识符无效：

{
  'foo-bar': 'baz',
  '5leafs': 123,
  'or.with': 'dots'
}

这就是为什么我们必须把它们写成字符串文字。

这种混淆也可能来自于Javascript 中的括号表示法 允许创建动态属性：

var foo = 'x', obj = { };
obj[foo] = 'bar';

这会创建一个名为“x”而不是“foo”的属性。如果我们通过点符号执行分配：

obj.foo = 'bar';

它会创建一个名为“foo”的属性。

所以这可以说是Javascript限制，因为我们不能同时拥有对象文字和动态评估的属性：

obj.foo         // does NOT evaluate
obj[foo]        // evaluates

({ foo: ... })  // does NOT evaluate
?               // evaluates

那为什么我之前提到过ECMAScript 5？

因为在ECMAScript 6（即将推出的标准）中，我们可能会有所谓的"computed property names"，您可以在其中动态评估对象文字中的属性名称，如下所示：

var foo = 'x';
var obj = { [foo]: 'bar' };

obj.foo; // undefined
obj.x; // 'bar'

我真的很期待这个。

Fabric.js - 无法动态设置属性

1 个答案:

TLDR

但为什么？