点坐标在fam.us中转换为特定曲面

Point coordinate translate to specific Surface in Famo.us

本文关键字：曲面 转换 坐标 fam us      更新时间：2023-09-26

我们有一个相当复杂的web应用程序内置在流星。UI主要在嵌套的HTML元素中。现在我们正尝试用Famo重写UI。所以我们可以有更好的性能，以及添加伟大的动画效果。我们应用中的一个特性是，当用户在元素A上拖动时，我们需要根据鼠标事件在B中的精确位置绘制一个新的元素B，也就是说，我们需要计算任何元素中点的坐标，即使元素有复杂的变换。我们在webkit浏览器(我们只支持webkit)中使用' webkitconvertpointfrommpagetonode '函数来完成这项工作。Famo。us有一个类似的函数，所以我可以计算一个特定曲面上的点坐标。或者你对如何用当前的API实现这些功能有什么建议吗?

谢谢

考虑到Famo中的转换。我们都有绝对定位的支持，在任何给定的表面上找到坐标都是非常简单的。在Event对象中，你可以获取目标表面的偏移量x和偏移量y。

看看这个例子…

希望有帮助!

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

我已经找到了正确的方法。

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

但后来我意识到Famo。我们知道每个曲面的变换!在呈现树中，从根上下文到RenderNode的路径上的所有修饰符构成了该节点及其下节点的转换。我们可以将它们相乘得到一个变换矩阵m，然后我们可以做一个坐标系变换来计算点在节点的局部坐标系中的右坐标。

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

花了我一点时间，但这对我来说很有效:

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

使用对齐和大小修改符

进行测试
相关文章：