Question

我有两个表面。一个是可拖动的，一个是'全屏'（大小：[未定义，未定义]）。我想拖动第一个表面（在我的例子中为黄色），并显示第二个（绿色）表面。当我点击绿色表面时，我想再次在原始起点（屏幕中心）显示第一个表面。

我也希望绿色表面不可拖动。

我是一个famo.us新手，任何帮助都非常感谢！

在这里摆弄：http://jsfiddle.net/cjs123456/vfzy4j51/

    // the position state
    var position = [0, 0];

    // create a Sync to listen to mouse events
    var sync = new MouseSync();

    var renderController = new RenderController();

    var mySurface = new Surface({
        size: [350, 200],
        content: 'drag me right more than 100px to see other surface',
        properties: {
            backgroundColor: "hsl(" + (5 * 360 / 40) + ", 100%, 50%)",
            lineHeight: '200px',
            textAlign: 'center',
            cursor: 'pointer'
        }
    });

    // Surface provides events that the sync listens to
    mySurface.pipe(sync);

    // Syncs have `start`, `update` and `end` events. On `update` we increment the position state of the surface based
    // on the change in x- and y- displacements
    sync.on('update', function(data){
        position[0] += data.delta[0];
        position[1] += data.delta[1];
        console.log(data.position[0]);
        if (data.position[0] > 100) {
            console.log("FULL");
            renderController.show(fullSurface);
        }
    });

    // this modifier reads from the position state to create a translation Transform that is applied to the surface
    var positionModifier = new Modifier({
        transform : function(){
            return Transform.translate(position[0], position[1], 0);
        }
    });

    // a modifier that centers the surface
    var centerModifier = new Modifier({
        origin : [0.5, 0.5],
        align: [0.5, 0.5]
    });

    var fullSurface = new Surface({
        size: [undefined, undefined],
        content: 'Click me to show other surface',
        properties: {
            backgroundColor: "hsl(" + (9 * 360 / 40) + ", 100%, 50%)",
            lineHeight: '400px',
            textAlign: 'center'
        }
    });

    fullSurface.on("click", function() {
        renderController.show(mySurface);
    });

    renderController.show(mySurface);

    var mainContext = Engine.createContext();
    var node = mainContext.add(centerModifier).add(positionModifier);
    node.add(renderController);

});

Answer 1

解决此问题的方法不止一种。

控制渲染控制器的拖动
创建单独的渲染控制器和控制视图

因为您的用例非常简单，我将展示创建单独的渲染控制器

以下是 jsFiddle Example of the Code

创建背景渲染控制器

var renderController = new RenderController();
var backRenderController = new RenderController();

将节点更改为中心修改器。将我们的draggable添加到节点。将后台控制器添加到节点。

var node = mainContext.add(centerModifier)
node.add(positionModifier).add(renderController);
node.add(backRenderController);

控制可拖动渲染控制器视图（第42行）

    renderController.hide();
    backRenderController.show(fullSurface);

单击背景会将可拖动的位置重置回原点，隐藏背景并再次显示可拖动。

    // Set draggable position back to the origin
    position = [0, 0];
    // Hide the back render element
    backRenderController.hide();
    // Show the draggable
    renderController.show(mySurface);

完整代码：

// the position state
var position = [0, 0];

// create a Sync to listen to mouse events
var sync = new MouseSync();

var renderController = new RenderController();
var backRenderController = new RenderController();

var mySurface = new Surface({
    size: [350, 200],
    content: 'drag me right more than 100px to see other surface',
    properties: {
        backgroundColor: "hsl(" + (5 * 360 / 40) + ", 100%, 50%)",
        lineHeight: '200px',
        textAlign: 'center',
        cursor: 'pointer'
    }
});

// Surface provides events that the sync listens to
mySurface.pipe(sync);

// Syncs have `start`, `update` and `end` events. On `update` we increment the position state of the surface based
// on the change in x- and y- displacements
sync.on('update', function (data) {
    position[0] += data.delta[0];
    position[1] += data.delta[1];
    console.log(data.position[0]);
    if (data.position[0] > 100) {
        console.log("FULL");
        renderController.hide();
        backRenderController.show(fullSurface);
    }
    //else {
    //    mySurface.setPosition([0,0,0], {
    //        curve: Easing.outBack,
    //        duration: 300
    //    });
    //}


});

// this modifier reads from the position state to create a translation Transform that is applied to the surface
var positionModifier = new Modifier({
    transform: function () {
        return Transform.translate(position[0], position[1], 0);
    }
});

// a modifier that centers the surface
var centerModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
});

var fullSurface = new Surface({
    size: [undefined, undefined],
    content: 'Click me to show other surface',
    properties: {
        backgroundColor: "hsl(" + (9 * 360 / 40) + ", 100%, 50%)",
        lineHeight: '400px',
        textAlign: 'center'
    }
});

fullSurface.on("click", function () {
    // Set draggable position back to the origin
    position = [0, 0];
    // Hide the back render element
    backRenderController.hide();
    // Show the draggable
    renderController.show(mySurface);
});

//var node = mainContext.add(myModifier);
//node.add(draggable).add(surface);

renderController.show(mySurface);

var mainContext = Engine.createContext();
//mainContext.add(myModifier).add(draggable).add(renderController);

var node = mainContext.add(centerModifier)
node.add(positionModifier).add(renderController);
node.add(backRenderController);

famo.us - RenderController和可拖动曲面

1 个答案:

完整代码：