重新校准使用css变换的x和y偏移量

我有一个自制函数，它给出了鼠标相对于特定目标元素（或evt.target）的相对位置，以及一个相关函数，它给出了与目标祖先相关的DOM对象。（底部）重新校准使用css变换的x和y偏移量

该函数可以处理某些CSS比例转换，但就是这样。如果有人确切知道如何修改代码以调整所有CSS转换的x和y偏移量，那将会很好。所以，理想情况下，我需要的是：

curleft += obj.offsetLeft * css_transform_scale_x + css_transform_offset_x 
curtop += obj.offsetTop * css_transform_scale_y + css_transform_offset_y

......只是不知道如何获得这些尺度和偏移量。

这是我正在使用的当前函数。

function getXY_zoom (evt, target) { 
if (typeof target == "undefined") target = evt.target 
if (typeof evt.pageX != "undefined") { 
    var obj = findabspos_zoom (target) 
    return [evt.pageX - obj[0], evt.pageY - obj[1]] 
} 
if (typeof evt.offsetX != "undefined") return [evt.offsetX, evt.offsetY] 
if (typeof evt.layerY != "undefined") return [evt.layerX, evt.layerY] 
} 

// Function to find the absolute position of a DOM object, taking CSS scale transforms into account. 
function findabspos_zoom (obj, lastobj) { 
var curleft = 0, curtop = 0, zoom_level_x = 0, zoom_level_y = 0, borderWidthTest = 0 
if (typeof lastobj == "undefined") lastobj = null 
do { 
    if (obj.offsetParent == lastobj) { 
    zoom_level_x = 1; zoom_level_y = 1 
    } else { 
    zoom_level_x = getInheritedTransform(obj.offsetParent, {transform_type: "scale", xy: "x"}) 
    zoom_level_y = getInheritedTransform(obj.offsetParent, {transform_type: "scale", xy: "y"}) 
    } 
    borderWidthTest = parseFloat(getComputedStyle(obj).borderLeftWidth) 
    if (!isNaN(borderWidthTest)) curleft += borderWidthTest * zoom_level_x 
    borderWidthTest = parseFloat(getComputedStyle(obj).borderTopWidth) 
    if (!isNaN(borderWidthTest)) curtop += borderWidthTest * zoom_level_y 
    if (obj.offsetParent == lastobj) return [curleft, curtop] // If offsetParent is lastobj (or null if lastobj is null), return the result. 
    curleft += obj.offsetLeft * zoom_level_x 
    curtop += obj.offsetTop * zoom_level_y 
    obj = obj.offsetParent 
} while (true) 
} 

// Example usage: getInheritedTransform (obj, {transform_type:scale, xy:"x"}) 
function getInheritedTransform (obj, init) { 
var transform_type = init.transform_type 
var xy    = init.xy 
var transform_string = "" 
var transform_array = [] 
switch (transform_type) { 
    case "scale": 
    var scale = 1 
    while (true) { 
    transform_string = getTransformString() 
    if (transform_string != false) { 
    transform_array = (transform_string.slice(7, transform_string.length - 6)).split(",") 
    switch (xy) { 
     case "x": scale *= parseFloat(transform_array[0]); break 
     case "y": scale *= parseFloat(transform_array[3]); break 
    } 
    } 
    var obj = obj.parentNode 
    if (obj.parentNode == null) break 
    } 
    return scale 
} 

function getTransformString() { 
    var transform_string = window.getComputedStyle(obj)["Transform"] 
    if (typeof transform_string == "undefined") {transform_string = window.getComputedStyle(obj)["msTransform"]} 
    if (typeof transform_string == "undefined") {transform_string = window.getComputedStyle(obj)["webkitTransform"]} 
    if (typeof transform_string == "undefined") {transform_string = window.getComputedStyle(obj)["MozTransform"]} 
    if (typeof transform_string == "undefined") {transform_string = window.getComputedStyle(obj)["OTransform"]} 
    if ((typeof transform_string == "undefined") || (transform_string == "none")) return false 
    return transform_string 
} 
}

来源

2013-12-13 Agamemnus

我有你在错误的方式接近问题的感觉。有时候，解决复杂问题的最好方法是完全避免它。

考虑到所有的样式和边距以及转换来计算坐标将是相当复杂的。

你有没有想过在转换后的元素前增加一个额外的透明图层并获得未转换的坐标？

来源

2013-12-13 20:58:37

如果额外的层是相同的名义大小？任何单一的转换都会改变真实的偏移量。 – Agamemnus

重新校准使用css变换的x和y偏移量

回答

相关问题