Question

我是Famo.us的新手我正在尝试编写以下代码。有4个着名的图像表面，表面2，表面3，表面4。 Surface1具有其他3个图像内容为空白。我想通过拖动图像或拖动surface1来设置其他3个表面的内容。它有三个问题：

1）第一次拖动后，我正在设置内容并尝试将图像界面（曲面）移回原始位置，但它没有移动。

2）当我在（0,0,0）之外的任何其他位置设置图像界面（表面）时，行为会发生变化。

3）当我用输入表面改变图像表面时，存在巨大的时间滞后。

这是我的代码：

  define(function(require, exports, module) {
  var Engine              = require("famous/core/Engine");
  var Surface             = require("famous/core/Surface");
  var Modifier             = require("famous/core/Modifier");
  var StateModifier       = require("famous/modifiers/StateModifier");
  var Draggable           = require("famous/modifiers/Draggable");
  var Transform           = require("famous/core/Transform");
  var Transitionable      = require("famous/transitions/Transitionable");
  var ImageSurface        = require('famous/surfaces/ImageSurface');
  var Timer               = require('famous/utilities/Timer');
  var EventHandler = require('famous/core/EventHandler');
  var InputSurface = require("famous/surfaces/InputSurface");


  var SnapTransition = require("famous/transitions/SnapTransition");
  Transitionable.registerMethod('snap', SnapTransition);

  var mainContext = Engine.createContext();
  var eventHandler = new EventHandler();

  var surface = new ImageSurface({
    size: [200, 200], 
    content: 'img/1.jpg',
    properties: {
      cursor: 'pointer'
    }
  });
  var background_surface = new ImageSurface({
    size: [200, 200], 
    content: 'img/1.jpg',
    properties: {
      cursor: 'pointer'
    }
  });

  var surface2 = new ImageSurface({
    size: [200, 200],
   //  type: 'image'
    content: ''
  });


  var surface3 = new ImageSurface({
    size: [200, 200],
    content: ''
  });

  var surface4 = new ImageSurface({
    size: [410, 200],
    content: ''
  });

  var mod2 = new Modifier({
    transform: Transform.translate(500, 0, 0)
  });
  mainContext.add(mod2).add(surface2);

  var mod3 = new Modifier({
    transform: Transform.translate(710, 0, 0)
  });
  mainContext.add(mod3).add(surface3);

  var mod4 = new Modifier({
    transform: Transform.translate(500, 210, 0)
  });
  mainContext.add(mod4).add(surface4);


  var draggable = new Draggable({
     xRange: [-1000, 1000],
     yRange: [-1000, 1000]
  });

  surface.pipe(draggable);

  var mod = new Modifier({

  });

  var back_mod = new Modifier({
    origin: [0,0]
  });

  var trans = {
    method: 'snap',
    period: 100,
    dampingRatio: 0.3,
    velocity: 0
  };
  var check=0;


  draggable.on('start', function()
  {   draggable.setPosition([0,0,0], trans);
    check=0;
    surface._matrix[12] = 0;
    console.log(surface._matrix[12]);

  });

  surface.on('mouseup', function() {
    draggable.setPosition([0,0,0], trans);
  });



  draggable.on('end', function(data){

    surface2.on('mouseover', function(){
    if(check==0)
    { draggable.setPosition([surface2._matrix[12],surface2._matrix[13],surface2._matrix[14]], trans);
      check=1; 
      mainContext.add(back_mod).add(background_surface);
    }
  });
  surface3.on('mouseover', function(){
      if(check==0)
      {console.log("Surface3");
       draggable.setPosition([surface3._matrix[12],surface3._matrix[13],surface3._matrix[14]], trans);
      mainContext.add(back_mod).add(background_surface);
      check=1;}
  });
  surface4.on('mouseover', function(){
       if(check==0){
       console.log("Surface4");  
       draggable.setPosition([surface4._matrix[12]-256,surface4._matrix[13],surface4._matrix[14]], undefined);
       var scale_factor= 410/200;
       mod.setTransform(
        Transform.scale(scale_factor,1, 0),  
        {  duration :0,curve: 'linear' }
        );
      check=1;
      mainContext.add(back_mod).add(background_surface);
      }
  });


  });

  mainContext.add(mod).add(draggable).add(surface);
  });

Answer 1

我有点不确定你的目的但是......这是一个不同的版本，其中draggable总是返回到0,0并且可以再次用于设置另一个图像表面的内容。你能帮忙详细了解你想要达到的目标吗？

define(function(require, exports, module) {
var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var Modifier             = require("famous/core/Modifier");
var StateModifier       = require("famous/modifiers/StateModifier");
var Draggable           = require("famous/modifiers/Draggable");
var Transform           = require("famous/core/Transform");
var Transitionable      = require("famous/transitions/Transitionable");
var ImageSurface        = require('famous/surfaces/ImageSurface');
var Timer               = require('famous/utilities/Timer');
var EventHandler = require('famous/core/EventHandler');
var InputSurface = require("famous/surfaces/InputSurface");

var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);

var mainContext = Engine.createContext();

var surface = new ImageSurface({
  size: [200, 200],
  content: 'images/1.jpg',
  properties: {
    cursor: 'pointer'
  }
});
var background_surface = new ImageSurface({
  size: [200, 200],
  content: 'images/1.jpg',
  properties: {
    cursor: 'pointer'
  }
});

var surface2 = new ImageSurface({
  size: [200, 200],
  content: ''
});

var surface3 = new ImageSurface({
  size: [200, 200],
  content: ''
});

var surface4 = new ImageSurface({
  size: [410, 200],
  content: ''
});

var mod2 = new Modifier({
  transform: Transform.translate(500, 0, 0)
});
mainContext.add(mod2).add(surface2);

var mod3 = new Modifier({
  transform: Transform.translate(710, 0, 0)
});
mainContext.add(mod3).add(surface3);

var mod4 = new Modifier({
  transform: Transform.translate(500, 210, 0)
});
mainContext.add(mod4).add(surface4);


var draggable = new Draggable({
  xRange: [-1000, 1000],
  yRange: [-1000, 1000]
});
draggable.imageSurface = surface;

surface.pipe(draggable);

var mod = new Modifier({

});

var back_mod = new Modifier({
  origin: [0,0]
});

var trans = {
  method: 'snap',
  period: 100,
  dampingRatio: 0.3,
  velocity: 0
};
var check=0;


draggable.on('start', function()
{
  check=0;
  surface._matrix[12] = 0;
  console.log(surface._matrix[12]);
});

draggable.on('end', function(data){
  var theDraggable = this;

  surface2.on('mouseover', function(){
    if(check==0)
    {
      console.log("Surface2");
      check=1;
      this.setContent(theDraggable.imageSurface._imageUrl);
    }
  });
  surface3.on('mouseover', function(){
    if(check==0)
    {console.log("Surface3");

      this.setContent(theDraggable.imageSurface._imageUrl);
      check=1;}
  });
  surface4.on('mouseover', function(){
    if(check==0){
      console.log("Surface4");
      this.setContent(theDraggable.imageSurface._imageUrl);
      check=1;
    }
  });

  this.setPosition([0,0,0], trans);

});

mainContext.add(mod).add(draggable).add(surface);
});

拖动相关问题famo.us

1 个答案: