0

我们有一个非常复杂的网络应用程序，内置在流星中。UI 主要在嵌套的 HTML 元素中。现在我们正在尝试使用 Famo.us 重写 UI，以便我们能够获得更好的性能以及添加出色的动画效果。我们应用程序的一个特点是，当用户在元素 A 上拖动时，我们需要根据鼠标事件在 B 中的精确位置来绘制一个新元素 B。也就是说，我们需要计算一个点在 B 中的坐标任何元素，甚至元素都有复杂的变换。我们在 webkit 浏览器中使用了“webkitConvertPointFromPageToNode”函数（我们只支持 webkit。）来完成这项工作。Famo.us 是否具有类似的功能，因此我可以计算特定 Surface 中的点坐标？或者您对如何使用当前 API 完成这些功能有什么建议？

谢谢

4

3 回答 3

2

鉴于 Famo.us 中的变换都是由绝对定位支持的，因此在任何给定表面中查找坐标非常简单。在 Event 对象中，您可以获取目标表面的 offsetX 和 offsetY。

看看这个例子..

希望能帮助到你！

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var StateModifier   = require('famous/modifiers/StateModifier');
var Transform       = require('famous/core/Transform');

var context = Engine.createContext();

var surface = new Surface({
    size:[200,200],
    properties: {
        backgroundColor:'green',
        color:'white',
        textAlign:'center',
        lineHeight:'200px'
    }
})

surface.on('mousemove',function(e){
    surface.setContent("x: "+e.offsetX+", y: "+e.offsetY);
})

surface.state = new StateModifier({
    transform: Transform.translate(100,100,0)
})

context.add(surface.state).add(surface);
于 2014-05-23T15:11:01.937 回答
0

我找到了正确的方法来做到这一点。

首先，我深入研究了我的评论中提到的 offsetX/offsetY 值实际上是基于子曲面的问题。因为 offsetX/offsetY 值是由 DOM 的 MouseEvent 生成的，并且没有修改就复制到 famo.us 中。DOM 不提供鼠标点在“currentTarget”上的坐标。它仅提供“目标”的值，即事件发生的元素。所以我们只能使用视口中的clientX/clientY坐标，然后计算该点在目标元素上的坐标。也没有官方 API 来进行计算。只有 webkit 提供了 'webkitConvertPointFromPageToNode' api 来执行此操作，因为布局引擎知道所有关于特定元素的位置和变换。

但后来我意识到，使用 Famo.us，我们知道每个表面的变换！在渲染树中，从根上下文到 RenderNode 的路径上的所有修改器形成了该节点和下面节点的变换。我们可以将它们相乘得到一个变换矩阵M。然后我们可以做一个坐标系变换来计算该点在节点的局部坐标系中的右坐标。

但是 Famo.us 没有直接的 API 来获取节点的所有修饰符，我自己在代码中完成了。我建议 Famo.us 在每个 RenderNode 上添加一个“父”引用，然后我们可以轻松地为任何节点获取它们。

于 2014-05-27T00:45:25.067 回答
0

我花了一段时间，但这对我有用：

var myX=event.clientX;
var myY=event.clientY;
for(var i=0;i<event.path.length;i++)
{
    if(event.path[i].style===undefined)
        continue;
    var matrix=event.path[i].style.transform;
    var matrixPattern = /^\w*\((((\d+)|(\d*\.\d+)),\s*)*((\d+)|(\d*\.\d+))\)/i;
    if (matrixPattern.test(matrix)) {
        var matrixCopy = matrix.replace(/^\w*\(/, '').replace(')', '');
        myX-=matrixCopy.split(/\s*,\s*/)[12];
        myY-=matrixCopy.split(/\s*,\s*/)[13];
    }
}

使用 align 和 size 修饰符测试

于 2014-11-20T12:47:52.583 回答