Как должен быть реализован метод commit(), чтобы иметь тот же эффект, что и рендер

У меня очень простой класс просмотра.

MyView(subView) {
  this.node = subView;
}

MyView.render = function() {
  this.node.render();
}

Использование этого значения, например, с вращением по оси y на 0,5,0,5, работает, как и ожидалось, поверхность поворачивается правильно.

var modifier = new famous.modifiers.StateModifier({
  origin: [0.5, 0.5]
});

modifier.setTransform(famous.core.Transform.rotateY(Math.PI / 3 * 1), { duration: 10000, curve: 'easeInOut' });

context.add(modifier).add(new MyView( new Surface(...)))

Чтобы иметь возможность использовать родительский размер, я вложил в ContextualView и переопределил commit().

commit: function (context) {
  var transform = context.transform;
  var origin = context.origin;
  var size = context.size;
  var align = context.align;

  if (size) {
    // stolen from gridlayout
    transform = famous.core.Transform.moveThen([-size[0]*origin[0], -size[1]*origin[1], 0], transform);
  }

  return {
    origin : origin,
    transform: transform,
    align : align,
    size: size,
    target: [
      {
        target : this.node.render()
      }
    ]
  };
}, 

К сожалению, это не работает, вращение отличается. Какой минимальный код должен содержать метод commit (), чтобы иметь такой же эффект, как и метод render?

1 ответ

Решение

Решение: удаление источника из возвращенного дерева рендера решает проблему.

commit: function (context) {
var transform = context.transform;
var origin = context.origin;
var size = context.size;
var align = context.align;

if (size) {
  // stolen from gridlayout
  transform = famous.core.Transform.moveThen([-size[0]*origin[0], -size[1]*origin[1], 0], transform);
}

return {
  transform: transform,
  align : align,
  size: size,
  target : this.node.render()
};

}

Другие вопросы по тегам