无法通过自定义视图传递修饰符

Question

您好，我正在尝试通过视图放置坐标轴以使其成为可重用模块，但是当我添加模块时，我丢失了所有对齐和原点属性，而且我无法在我的 main.xml 中修改它们。我在这里错过了什么。

main.js

define(function(require) {
  var Engine = famous.core.Engine;
  var Modifier = famous.core.Modifier;
  var Transform = famous.core.Transform;
  var StateModifier = famous.modifiers.StateModifier;

  var WireFrameView = require('WireFrameView');

  var cContainerElement;
  var oMainContext;
  var fAngle = 0.0;

  var oWireFrameView = new WireFrameView()

  var oViewRotator = new Modifier({
    align: [.5, .5],
    origin: [.5, .5]
  });


  var oAlignOriginModifier = new StateModifier({
    align: [.5, .5],
    origin: [.5, .5]
  });

  cContainerElement = document.getElementById("FamousContent");
  oMainContext = Engine.createContext(cContainerElement);

  oMainContext.add(oWireFrameView);
  oViewRotator.transformFrom(rotateYY);

  return;
});

WireFrameView.js

define(function(require, exports, module) {
  var PhysicsEngine = famous.physics.PhysicsEngine;
  var View = famous.core.View;
  var Modifier = famous.core.Modifier;
  var Transform = famous.core.Transform;
  var StateModifier = famous.modifiers.StateModifier;
  var Surface = famous.core.Surface;
  var Engine = famous.core.Engine;

  cContainerElement = document.getElementById("FamousContent");
  oMainContext = Engine.createContext(cContainerElement);

  function WireFrameView() {
    View.apply(this, arguments);
    addframe.call(this);
  }

  function addframe() {
    var oXAxis = new Surface({
      size: [undefined, 1],
      properties: {
        backgroundColor: 'purple'
      }
    });

    var oCenterCircle = new Surface({
      size: [15, 15],
      properties: {
        border: '1px solid blue',
        borderRadius: '7px'
      }
    });

    var oYAxis = new Surface({
      size: [1, undefined],
      properties: {
        backgroundColor: 'red'
      }
    });

    var oAlignOriginModifier = new StateModifier({
      align: [0.5, 0.5],
      origin: [.5, .5]
    });

    var lightSquare = new Surface({
      size: [100, 100],
      properties: {
        color: '#000000',
        backgroundColor: '#aaaaaa'
      }
    });

    var alignOriginModifiersq = new StateModifier({
      align: [0.5, 0.5],
      origin: [1, 1]
    });

    oMainContext.add(alignOriginModifiersq)
      .add(lightSquare);

    var node = oMainContext.add(oAlignOriginModifier);
    node.add(oXAxis);
    node.add(oYAxis);
    node.add(oCenterCircle);
  }

  WireFrameView.prototype = Object.create(View.prototype);
  WireFrameView.prototype.constructor = WireFrameView;

  WireFrameView.DEFAULT_OPTIONS = {};
  module.exports = WireFrameView;
});

我的 x 轴在顶部，因为我根本没有任何 y 轴，单独看来工作正常。

Answer 1

您不必在视图中创建新上下文，因此视图本身 (this) 将是 RenderNode。

WireFrameView.js

  function WireFrameView() {
    View.apply(this, arguments);

    addframe.call(this);
  }

  function addframe() {
    var oXAxis = new Surface({
      size: [undefined, 1],
      properties: {
        backgroundColor: 'purple'
      }
    });

    var oCenterCircle = new Surface({
      size: [15, 15],
      properties: {
        border: '1px solid blue',
        borderRadius: '7px'
      }
    });

    var oYAxis = new Surface({
      size: [1, undefined],
      properties: {
        backgroundColor: 'red'
      }
    });

    var oAlignOriginModifier = new Modifier({
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var lightSquare = new Surface({
      size: [100, 100],
      properties: {
        color: '#000000',
        backgroundColor: '#aaaaaa'
      }
    });

    var alignOriginModifiersq = new StateModifier({
      align: [0.5, 0.5],
      origin: [1, 1]
    });

    this.add(alignOriginModifiersq)
      .add(lightSquare);

    var node = this.add(oAlignOriginModifier);
    node.add(oXAxis);
    node.add(oYAxis);
    node.add(oCenterCircle);
  }

  WireFrameView.prototype = Object.create(View.prototype);
  WireFrameView.prototype.constructor = WireFrameView;

  WireFrameView.DEFAULT_OPTIONS = {};
  module.exports = WireFrameView;

此外，您需要根据父上下文调整大小。

oMainContext = Engine.createContext(cContainerElement);
oMainContext.setSize([500, 500]);

OR 如果您使用默认上下文（显示在示例片段中）

oMainContext = Engine.createContext();

工作示例片段

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');

  var WireFrameView = require('WireFrameView');

  var cContainerElement;
  var oMainContext;
  var fAngle = 0.0;

  var oWireFrameView = new WireFrameView({
    size: [500, 500]
  });

  var oAlignOriginModifier = new StateModifier({
    align: [0.5, 0.5],
    origin: [0.5, 0.5]
  });

  cContainerElement = document.getElementById("FamousContent");

  //oMainContext = Engine.createContext(cContainerElement);
  //oMainContext.setSize([500, 500]);

  oMainContext = Engine.createContext();

  var yAxis = function() {
      return Transform.rotateY(0.002 * (Date.now() - initialTime));
    };
  var zAxis = function() {
      return Transform.rotateZ(0.002 * (Date.now() - initialTime));
    };
  
  var initialTime = Date.now();
  var centerSpinModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
    transform: yAxis
  });

  var ctxNode = oMainContext.add(oAlignOriginModifier);
  ctxNode.add(centerSpinModifier).add(oWireFrameView);
  
});
require(['main']);
define('WireFrameView', function(require, exports, module) {
  var Surface = require('famous/core/Surface');
  var RenderNode = require('famous/core/RenderNode');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');
  var View = require('famous/core/View');

  function WireFrameView() {
    View.apply(this, arguments);

    addframe.call(this);
  }

  function addframe() {
    var oXAxis = new Surface({
      size: [undefined, 1],
      classes: ['double-sided'],
      properties: {
        backgroundColor: 'purple'
      }
    });

    var oCenterCircle = new Surface({
      size: [15, 15],
      classes: ['double-sided'],
      properties: {
        border: '1px solid blue',
        borderRadius: '7px'
      }
    });

    var oYAxis = new Surface({
      size: [1, undefined],
      classes: ['double-sided'],
      properties: {
        backgroundColor: 'red'
      }
    });

    var oAlignOriginModifier = new Modifier({
      size: this.options.size,
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var lightSquare = new Surface({
      content: 'Square 100,100',
      size: [100, 100],
      classes: ['double-sided'],
      properties: {
        color: '#000000',
        backgroundColor: '#aaaaaa'
      }
    });

    var alignOriginModifiersq = new Modifier({
      align: [0.5, 0.5],
      origin: [1, 1]
    });

    this.add(oAlignOriginModifier).add(alignOriginModifiersq)
      .add(lightSquare);

    this.add(oXAxis)
    this.add(oYAxis);
    this.add(oCenterCircle);
  }

  WireFrameView.prototype = Object.create(View.prototype);
  WireFrameView.prototype.constructor = WireFrameView;

  WireFrameView.DEFAULT_OPTIONS = {};
  module.exports = WireFrameView;
});

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<style>
  .double-sided {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
</style>
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

<div id="FamousContent"></div>

无法通过自定义视图传递修饰符

Unable to pass on modifiers via custom views

javascript

requirejs

famo.us

WireFrameView.js

工作示例片段