Question

到目前为止，我默认只能将其附加到body，或者如果我指定div，famous-dom-renderer会附加到它找到的第一个div。如何根据类或id？

设置选择器

var scene = FamousEngine.createScene('the div I am targeting');

Answer 1

任何DOM选择器(string)值都可以传递给FamousEngine.createScene方法。

var scene = FamousEngine.createScene('body');

如果没有参数传递给FamousEngine.createScene方法，那么它将默认为body DOM元素（与上面相同）。

var scene = FamousEngine.createScene();

使用以下HTML，以下任何一项都有效。

var scene = FamousEngine.createScene('#top');

var scene = FamousEngine.createScene('.top');

var scene = FamousEngine.createScene('#bottom');

var scene = FamousEngine.createScene('.bottom');

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;

            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                background-color: black;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }
          .top {
            color: white;
            height: 50%;
          }
          .bottom {
            color: white;
            height: 50%;
          }
        </style>
    </head>
    <body>
      <div id="top" class="top">This is the top DOM element</div>
      <div id="bottom" class="bottom">This is the bottom DOM element</div>
    </body>
</html>

使用下面的代码段来测试上面的代码。

// Famous dependencies
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;
var Camera = famous.components.Camera;
var clock = FamousEngine.getClock();

// Initialize with a scene; then, add a 'node' to the scene root
var scene = FamousEngine.createScene('#bottom');
var node = scene.addChild();

node.addUIEvent('load');
var myComponent = {
  onReceive: function(event, payload) {
    console.log(
      'Received ' + event + ' event!',
      payload
    );
    if (event === 'load') {
      payload.node.requestUpdate(spinner);
    }
  }
};
node.addComponent(myComponent);

// Create an [image] DOM element providing the logo 'node' with the 'src' path
var el = new DOMElement(node, {
    tagName: 'img'
  })
  .setAttribute('src', 'http://staging.famous.org/examples/images/famous-logo.svg');

// Chainable API
node
// Set size mode to 'absolute' to use absolute pixel values: (width 250px, height 250px)
  .setSizeMode('absolute', 'absolute', 'absolute')
  .setAbsoluteSize(50, 50)
  // Center the 'node' to the parent (the screen, in this instance)
  .setAlign(0.5, 0.5)
  // Set the translational origin to the center of the 'node'
  .setMountPoint(0.5, 0.5, 0.5)
  // Set the rotational origin to the center of the 'node'
  .setOrigin(0.5, 0.5);

// Add a spinner component to the logo 'node' that is called, every frame
var spinner = node.addComponent({
  onUpdate: function(time) {
    node.setRotation(0, time / 500, 0);
    node.requestUpdateOnNextTick(spinner);
  }
});

// Let the magic begin...
node.requestUpdate(spinner);
FamousEngine.init();

// To set perspective
var camera = new Camera(scene);
camera.setDepth(1000);

html,
            body {
              width: 100%;
              height: 100%;
              margin: 0px;
              padding: 0px;
            }
            body {
              position: absolute;
              -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
              -webkit-font-smoothing: antialiased;
              -webkit-tap-highlight-color: transparent;
              background-color: black;
              -webkit-perspective: 0;
              perspective: none;
              overflow: hidden;
            }
            .top {
              color: white;
              height: 50%;
            }
            .bottom {
              color: white;
              height: 50%;
            }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
</head>

<body>
  <div id="top" class="top">This is the top DOM element</div>
  <div id="bottom" class="bottom">This is the bottom DOM element</div>
</body>

</html>

Answer 2

接下来我尝试了下一件事，所以答案就是：为你定位的id设置一个div来创建这样的场景：

<div id="scene-target"></div>

var scene = FamousEngine.createScene('#scene-target');

在Famous Engine（2015）中创建场景时，如何设置选择器？规则是什么？

2 个答案:

使用下面的代码段来测试上面的代码。