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

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(即将出台的标准)中,我们可能会有所谓的"计算属性名称",您可以在其中动态评估对象文字中的属性名称,如下所示:

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

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

我真的很期待这个.