我想拖动一个 Famous 曲面,当我放开它时让它回到原来的位置。我采用了“拖动”示例并对其进行了修改,但是虽然触发了 mouseup
回调(我检查了 console.log
),但修饰符转换并未触发。这是相关代码:
var surface = new Surface({
size: [200, 200],
content: 'drag',
properties: {
backgroundColor: 'rgba(200, 200, 200, 0.5)',
lineHeight: '200px',
textAlign: 'center',
cursor: 'pointer'
}
});
var draggable = new Draggable({
xRange: [-220, 220],
yRange: [-220, 220]
});
surface.pipe(draggable);
var mod = new Modifier();
var trans = {
method: 'snap',
period: 300,
dampingRatio: 0.3,
velocity: 0
};
surface.on('mouseup', function() {
mod.setTransform(Transform.translate(0, 0, 0), trans);
});
mainContext.add(mod).add(draggable).add(surface);
很确定它与我add
最后将它们添加到mainContext
的顺序/方式以及事件触发的顺序有关.我做错了什么/误解了什么?
最佳答案
您需要在可拖动修改器上设置位置,而不是尝试更新修改器(注意我已将您切换到 StateModifier)
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
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 SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);
var mainContext = Engine.createContext();
var surface = new Surface({
size: [200, 200],
content: 'drag',
properties: {
backgroundColor: 'rgba(200, 200, 200, 0.5)',
lineHeight: '200px',
textAlign: 'center',
cursor: 'pointer'
}
});
var draggable = new Draggable({
xRange: [-220, 220],
yRange: [-220, 220]
});
surface.pipe(draggable);
var mod = new StateModifier();
var trans = {
method: 'snap',
period: 300,
dampingRatio: 0.3,
velocity: 0
};
surface.on('mouseup', function() {
draggable.setPosition([0,0,0], trans);
});
mainContext.add(mod).add(draggable).add(surface);
关于javascript - 拖动一个 Famous 表面并让它在 mouseup 上过渡回原点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23129805/