Question

当我将球的原点设置为[0.5,0.5]时，墙壁被正确放置，当我将其变换或原点设置到墙壁移动的任何其他位置时？

我试图明确设置引擎原点，但这不起作用

此代码可以复制粘贴到着名入门套件中的main.js

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

  var PhysicsEngine = require('famous/physics/PhysicsEngine');
  var Body = require('famous/physics/bodies/Body');
  var Circle = require('famous/physics/bodies/Circle');
  var Wall = require('famous/physics/constraints/Wall');
  var Vector = require('famous/math/Vector');

  var context = Engine.createContext();

  var handler = new EventHandler();
//{origin:[0.5,0.5]}
  var physicsEngine = new PhysicsEngine();

  $('#game').on('click', function(event) {
    console.log('x '+event.clientX);
    console.log('y '+event.clientY)
    createBall(event.clientX, event.clientY);
  })

var leftWall = new Wall({
  normal: [1, 0, 0],
  distance: window.innerWidth / 2.0,
  restitution: 0.5
});
var rightWall = new Wall({
  normal: [-1, 0, 0],
  distance: window.innerWidth / 2.0,
  restitution: 0.5
});
var topWall = new Wall({
  normal: [0, 1, 0],
  distance: window.innerHeight / 2.0,
  restitution: 0.5
});
console.log(window.innerHeight )
console.log(window.innerWidth )
var bottomWall = new Wall({
  normal: [0, -1, 0],
  distance: window.innerHeight / 2.0,
  restitution: 0.5
});

leftWall = physicsEngine.attach(leftWall,[]);
rightWall = physicsEngine.attach(rightWall,[]);
topWall = physicsEngine.attach(topWall,[]);
bottomWall = physicsEngine.attach(bottomWall,[]);
var balls = []
  function createBall(x, y) {
    var ball = new Surface({
      size: [100, 100],
      properties: {
        backgroundColor: 'red',
        borderRadius: '100px'
      }
    })
    ball.state = new StateModifier({
    //  transform: Transform.translate(x, y, 0)
    });
    ball.particle = new Circle({
      radius: 50,
      position : new Vector(x, y, 0)
    });
    physicsEngine.addBody(ball.particle);
    ball.on("click", function() {
      console.log('clicked ball')
      ball.particle.setVelocity([1, 1, 0]);
    });
    context.add(ball.state).add(ball)
    Engine.on('prerender', function() {
      ball.state.setTransform(ball.particle.getTransform())
    });
  //  balls.push(ball.particle);
    //bottomWall = physicsEngine.attach(ball.particle,balls);

    physicsEngine.attachTo(leftWall,ball.particle);
    physicsEngine.attachTo(rightWall,ball.particle);
    physicsEngine.attachTo(topWall,ball.particle);
    physicsEngine.attachTo(bottomWall,ball.particle);
  }

});

Answer 1

物理碰撞和粒子的添加是由famo.us中物理引擎的起源驱动的，因此您需要将物理引擎的原点设置为渲染节点。

从下面的代码或以下链接中可以看到： jsFiddle Link

墙壁的放置由物理引擎连接时的原点驱动。附着在墙壁上的粒子也受到物理引擎原点的约束，因此改变它们的原点会对它们与墙壁的碰撞产生影响。

示例代码不会将修改器附加到圆圈，而是将它们添加到粒子中。我不确定你是否想要做一些不同的事情，但希望这能回答你的问题。

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

    var PhysicsEngine = require('famous/physics/PhysicsEngine');
    var Body = require('famous/physics/bodies/Body');
    var Circle = require('famous/physics/bodies/Circle');
    var Wall = require('famous/physics/constraints/Wall');
    var Vector = require('famous/math/Vector');

    var context = Engine.createContext();
    var node = new RenderNode();

    var physicsOrigin = [0.5, 0.5];
    var radius = 50;

    context.add(new Modifier({
        origin: physicsOrigin
    })).add(node);

    var handler = new EventHandler();
    var physicsEngine = new PhysicsEngine();
    node.add(physicsEngine);

    console.log(window.innerHeight);
    console.log(window.innerWidth);
    var dimX = window.innerWidth;
    var dimY = window.innerHeight;

    Engine.on('click', function (event) {
        console.log('x ' + event.clientX);
        console.log('y ' + event.clientY)
        var x = event.clientX - (dimX * physicsOrigin[0]);
        var y = event.clientY - (dimY * physicsOrigin[1]);
        createBall(x, y);
    });

    var leftWall = new Wall({
        normal: [1, 0, 0],
        distance: Math.round(dimX / 2.0),
        restitution: 0.5
    });
    var rightWall = new Wall({
        normal: [-1, 0, 0],
        distance: Math.round(dimX / 2.0),
        restitution: 0.5
    });
    var topWall = new Wall({
        normal: [0, 1, 0],
        distance: Math.round(dimY / 2.0),
        restitution: 0.5
    });
    var bottomWall = new Wall({
        normal: [0, -1, 0],
        distance: Math.round(dimY / 2.0),
        restitution: 0.5
    });

    var balls = [];
    physicsEngine.attach([leftWall, rightWall, topWall, bottomWall], balls);

    function createBall(x, y) {
        var ball = new Surface({
            size: [radius * 2, radius * 2],
            properties: {
                backgroundColor: 'blue',
                borderRadius: (radius * 2) + 'px'
            }
        })
        ball.particle = new Circle({
            radius: radius,
            position: [x, y, 0]
        });
        physicsEngine.addBody(ball.particle);
        node.add(ball.particle).add(ball)
        ball.on("click", function () {
            console.log('clicked ball')
            ball.setOptions({properties: {backgroundColor: 'red'}});
            ball.particle.setVelocity([1, 1, 0]);
        });

        balls.push(ball.particle);
    }
});

墙壁位置不正确

1 个答案: