Question

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

由于

Answer 1

鉴于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);

Answer 2

我找到了正确的方法。

首先，我挖掘了我的评论中提到的问题，即offsetX / offsetY值实际上是基于子表面。因为offsetX / offsetY值是由DOM的MouseEvent生成的，并且没有修改就被复制到famo.us中。 DOM不会在＆＃39; currentTarget＆＃39;上提供鼠标点的坐标。它只提供＆＃39; target＆＃39;的值，这是事件发生的元素。因此我们只能在视口中使用clientX / clientY坐标，然后计算目标元素上该点的坐标。也没有官方API来进行计算。只有webkit提供了webkitConvertPointFromPageToNode＆＃39; api这样做是因为布局引擎知道所有关于位置的信息并对特定元素进行转换。

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

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

Answer 3

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

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];
    }
}

使用对齐和大小修饰符进行测试

点坐标转换为Famo.us中的特定Surface

3 个答案: