Javascript 美国著名的两个可拖动表面之间的弹簧

我试图实现两个表面，用弹簧连接，在famo.us中会对拖动产生反应。到目前为止，我已经设置了这些表面，可以拖动它们，有一个弹簧，可以在加载页面时进行交互，但不能拖动。所以问题是a）我应该如何用弹簧连接两个曲面，b）当我拖动一个曲面时，如何更新物理，以便另一个曲面跟随拖动的曲面

到目前为止，我掌握的代码是

define(function(require) {

  var Engine          = require('famous/core/Engine');
  var Surface         = require('famous/core/Surface');
  var StateModifier   = require('famous/modifiers/StateModifier');
  var PhysicsEngine   = require('famous/physics/PhysicsEngine');
  var Circle          = require('famous/physics/bodies/Circle');
  var Draggable       = require('famous/modifiers/Draggable');
  var Spring          = require('famous/physics/forces/Spring');
  var Vector          = require('famous/math/Vector');

  var context = Engine.createContext();
  var physicsEngine = new PhysicsEngine();

  var ball = new Surface ({
    size: [100,100],
    properties: {
          backgroundColor: 'red',
          borderRadius: '50px'
    }
  });

  var ball2 = new Surface ({
    size: [100,100],
    properties: {
          backgroundColor: 'blue',
          borderRadius: '50px'
    }
  });

  var draggable = new Draggable();
  var draggable2 = new Draggable();

  ball.state = new StateModifier({origin:[0.2,0.2]});
  ball2.state = new StateModifier({origin:[0.3,0.3]});

  ball.particle = new Circle({radius:100});
  ball2.particle = new Circle({radius:100});

  var spring = new Spring({
      anchor:         ball.particle,
      period:         400,  // <= Play with these values :-)
      dampingRatio:   0.07, // <=
      length:         50
  });
//    var spring2 = new Spring({anchor: ball2.particle});

//    physicsEngine.attach(spring, ball2.particle);
//    physicsEngine.attach(spring2, ball.particle);

  draggable.subscribe(ball);
  draggable2.subscribe(ball2);

  draggable.on('update', function() {
      console.info('update');
      ball2.particle.applyForce(new Vector(0, 0, -0.005 * 100));
//        ball.state.setTransform(ball.particle.getTransform())
//        ball.state.setTransform(ball.particle.getTransform())
//        ball.particle.setVelocity([0.001,0,0]);
//        physicsEngine.wake();
//        physicsEngine.step();
  });
  draggable2.on('update', function() {
//        ball2.particle.setVelocity([0.001,0,0]);
//        console.info('update');
//        physicsEngine.wake();
//        physicsEngine.step();
  });


  physicsEngine.attach(spring, ball2.particle);
//    spring.applyForce(ball.particle);
  physicsEngine.addBody(ball.particle);
  physicsEngine.addBody(ball2.particle);


//    ball.on("click",function(){
//      ball.particle.setVelocity([10,0,0]);
//    });
//
//    ball2.on("click",function(){
//      ball2.particle.setVelocity([0,10,0]);
//    });

  context.add(draggable).add(ball.state).add(ball);
  context.add(draggable2).add(ball2.state).add(ball2);

  Engine.on('prerender', function(){
    ball.state.setTransform(ball.particle.getTransform());
    ball2.state.setTransform(ball2.particle.getTransform());
  });

});

定义（功能（需要）{
var Engine=require（“著名/核心/引擎”）；
var表面=要求（“著名/核心/表面”）；
var StateModifier=require（'著名的/modifiers/StateModifier'）；
var physicengine=require（‘著名的／物理的／physicengine’）；
var Circle=require（“著名的/物理学的/身体的/圈子”）；
var Draggable=require（'著名的/修饰词/可拖动的'）；
var-Spring=require（“著名的/物理的/力的/弹簧”）；
var Vector=require（‘著名/数学/向量’）；
var context=Engine.createContext（）；
var physicengine=新physicengine（）；
var ball=新曲面({
尺寸：[100100]，
特性：{
背景颜色：“红色”，
边界半径：“50px”
}
});
var ball2=新曲面({
尺寸：[100100]，
特性：{
背景颜色：“蓝色”，
边界半径：“50px”
}
});
var draggable=新的draggable（）；
var draggable2=新的Draggable（）；
ball.state=newstateModifier（{origin:[0.2,0.2]}）；
ball2.state=新的StateModifier（{origin:[0.3,0.3]}）；
ball.particle=新圆（{半径：100}）；
ball2.particle=新圆（{半径：100}）；
var弹簧=新弹簧({
主播：球，粒子，
句号：400，//到目前为止，您似乎对PE有很好的理解。我仍然可以看到一些可以改进的地方。下面是一个使用弹簧拖动的工作示例。虽然这个实现还不完美，但应该可以开始了。如果您从拖动红色圆圈开始，一切都可以正常工作期待..拖动有它自己的位置，粒子也有它自己的位置。所以当你抓住蓝色的圆圈时，粒子中仍然有一个偏移量。下面是将得到95%的偏移量

希望能有帮助

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 Draggable       = require('famous/modifiers/Draggable');

var PhysicsEngine   = require('famous/physics/PhysicsEngine');
var Circle          = require('famous/physics/bodies/Circle');
var Spring          = require('famous/physics/forces/Spring');

var context = Engine.createContext();
var physicsEngine = new PhysicsEngine();

var ball = new Surface ({
  size: [100,100],
  properties: {
        backgroundColor: 'red',
        borderRadius: '50px'
  }
});

var ball2 = new Surface ({
  size: [100,100],
  properties: {
        backgroundColor: 'blue',
        borderRadius: '50px',
  }
});

ball.mod = new Modifier({origin:[0.5,0.5]});
ball.draggable = new Draggable();
ball.pipe(ball.draggable);
ball.particle = new Circle({radius:100});
ball.mod.transformFrom(function(){ return Transform.translate(0,0,0) });

ball.spring = new Spring({
  anchor:         ball.particle,
  period:         400,
  dampingRatio:   0.07,
  length:         50
});

ball2.mod = new Modifier({origin:[0.5,0.5]});
ball2.draggable = new Draggable();
ball2.pipe(ball2.draggable);
ball2.particle = new Circle({radius:100});
ball2.mod.transformFrom(function(){ return ball2.particle.getTransform()});

ball2.spring = new Spring({
  anchor:         ball2.particle,
  period:         400,
  dampingRatio:   0.07,
  length:         50
});

ball.draggable.on('start',function(){

  ball2.setProperties({pointerEvents:'none'});

  if (ball2.springID) physicsEngine.detach(ball2.springID);
  if (ball.springID) physicsEngine.detach(ball.springID);

  ball.springID = physicsEngine.attach(ball.spring, ball2.particle);
  ball2.springID = null;

  ball.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
  ball2.mod.transformFrom(function(){ return ball2.particle.getTransform()});

})

ball.draggable.on('update', function() {
    pos = ball.draggable.getPosition();
    ball.particle.setPosition(pos);
});

ball.draggable.on('end', function() {
  ball2.setProperties({pointerEvents:'all'});
});

ball2.draggable.on('start',function(){

  ball.setProperties({pointerEvents:'none'});

  if (ball2.springID) physicsEngine.detach(ball2.springID);
  if (ball.springID) physicsEngine.detach(ball.springID);

  ball2.springID = physicsEngine.attach(ball2.spring, ball.particle);
  ball.springID = null;

  ball2.mod.transformFrom(function(){ return Transform.translate(0,0,0) });
  ball.mod.transformFrom(function(){ return ball.particle.getTransform()});

})

ball2.draggable.on('update', function() {
    pos = ball2.draggable.getPosition();
    ball2.particle.setPosition(pos);
});

ball2.draggable.on('end', function() {
  ball.setProperties({pointerEvents:'all'});
});

ball.springID = physicsEngine.attach(ball.spring, ball2.particle);

physicsEngine.addBody(ball.particle);
physicsEngine.addBody(ball2.particle);

context.add(ball.mod).add(ball.draggable).add(ball);
context.add(ball2.mod).add(ball2.draggable).add(ball2);

谢谢！正是我想要的！