Как преобразовать координаты экрана в координаты на z преобразованном элементе?

Question

У меня есть z преобразованный элемент, который имеет маркер в качестве дочернего элемента, и мне нужно поместить этот маркер в положение щелчка мыши.

мне нужно знать, как преобразовать координаты экрана в координаты на г трансформируются элемента.

Вот мой текущий код:

function getPosition(screenCoords) 
 
{ 
 
    // This function should return x and y coordinates on z-transformed element and I have no idea how to achieve that. 
 
    
 
    return {x: 2500, y: 1500}; 
 
} 
 

 
var $viewport = $(".viewport"); 
 
var $marker = $(".marker"); 
 
    
 
$viewport.on("click", function(e){ 
 
     
 
    e.preventDefault(); 
 
     
 
    var newMarkerPosition = getPosition({x: e.pageX, y: e.pageY}); 
 
     
 
    $marker.css({ 
 
     left: newMarkerPosition.x + "px", 
 
     top: newMarkerPosition.y + "px" 
 
    }); 
 
     
 
});

html, body { 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
.viewport { 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    
 
    perspective: 1000px; 
 
    perspective-origin: 50% 50%; 
 
} 
 

 
.z-transformed-element { 
 
    
 
    width: 5000px; 
 
    height: 3000px; 
 
    transform-origin: 2500px 1500px; 
 
    background-color: gray; 
 
    position: relative; 
 
    
 
    transform: translateX(-2500px) translateY(-1500px) translateZ(-10000px); 
 
    
 
} 
 

 
.marker { 
 
    
 
    left: 0; 
 
    top: 0; 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: -100px; 
 
    margin-top: -100px; 
 
    background-color: red; 
 
    border-radius: 100px; 
 
    position: absolute; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="viewport"> 
 
    <div class="z-transformed-element"> 
 
     <div class="marker"></div> 
 
    </div> 
 
</div>

Answer 1

Самое сложное здесь, кажется, преобразование из экрана пространственных координат, нажав на преобразованных координат. Один из способов сделать это, чтобы использовать getBoundingClientRect() функции (которая возвращает размеры/положение объекта после того, как все преобразования применяются), и использовать его размеры, чтобы вычислить соотношение между отображаемыми размерами элемента, и их «фактический» Габаритные размеры.

После того как вы это соотношение, просто умножить его координаты щелчка (после сдвига их, чтобы быть относительно отображаемого центра элемента координаты), чтобы получить преобразованные координаты щелчка.

Я добавил в свой код, чтобы показать, как вы можете использовать этот подход, чтобы переместить CSS-трансформированных элемент в позиции щелчка мыши:

function getPosition(screenCoords) 
 
{ 
 
    var $transformedEl = $(".z-transformed-element"); 
 
    
 
    // Calculating "actual" center of element 
 
    var elementCenter = { 
 
     x: $transformedEl.innerWidth()/2, 
 
     y: $transformedEl.innerHeight()/2 
 
    } 
 
    
 
    // Determining ratio of displayed dimensions to "actual" dimensions 
 
    var boundingRect = $transformedEl[0].getBoundingClientRect(); 
 
    var dimRatio = $transformedEl.innerWidth()/boundingRect.width; 
 
    
 
    // Determining offset click coordinates (relative to displayed center of element) 
 
    var clickOffset = { 
 
     x: screenCoords.x - $transformedEl.offset().left - boundingRect.width/2, 
 
     y: screenCoords.y - $transformedEl.offset().top - boundingRect.height/2 
 
    } 
 
    
 
    // Calculating coordinates of click, relative to element's "actual" center and ratio of displayed to "actual" dimensions 
 
    var finalCoords = { 
 
    \t x: elementCenter.x + clickOffset.x * dimRatio, 
 
    \t y: elementCenter.y + clickOffset.y * dimRatio 
 
    } 
 
    
 
    return finalCoords; 
 
} 
 

 
var $viewport = $(".viewport"); 
 
var $marker = $(".marker"); 
 
    
 
$viewport.on("click", function(e){ 
 
     
 
    e.preventDefault(); 
 
    
 
    console.log(e.pageX, e.pageY); 
 
    
 
    var newMarkerPosition = getPosition({x: e.pageX, y: e.pageY}); 
 
     
 
    $marker.css({ 
 
     left: newMarkerPosition.x + "px", 
 
     top: newMarkerPosition.y + "px" 
 
    }); 
 
     
 
});

html, body { 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
.viewport { 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    
 
    perspective: 1000px; 
 
    perspective-origin: 50% 50%; 
 
} 
 

 
.z-transformed-element { 
 
    
 
    width: 5000px; 
 
    height: 3000px; 
 
    transform-origin: 2500px 1500px; 
 
    background-color: gray; 
 
    position: relative; 
 
    
 
    transform: translateX(-2500px) translateY(-1500px) translateZ(-10000px); 
 
    
 
} 
 

 
.marker { 
 
    
 
    left: 0; 
 
    top: 0; 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: -100px; 
 
    margin-top: -100px; 
 
    background-color: red; 
 
    border-radius: 100px; 
 
    position: absolute; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="viewport"> 
 
    <div class="z-transformed-element"> 
 
     <div class="marker"></div> 
 
    </div> 
 
</div>

(я признаю, что найти самый простой подход был тяжело для меня - я почти пошел маршрут трансформирования координат с матрицами преобразования Г)

Надеется, что это помогает!.! Дайте знать, если у вас появятся вопросы.