Как получить координаты повернутого изображения в перспективе? - PullRequest
Новая
       32

Как получить координаты повернутого изображения в перспективе?

0 голосов
/ 27 февраля 2019

У меня есть вращающееся изображение, и я хотел бы получить координаты повернутых 4 углов, мне это нужно для проверки столкновений.Я нарисовал квадрат, чтобы показать, что я получаю, используя left / top / width / height элемента изображения.

Я нашел эту тему, но я не уверен, что такое xm и ym: Получить новоеx, y координаты точки в повернутом изображении

Я также пытался следовать этому примеру, но даже заменив изображение на div и добавив фиктивные div, я получаю тот же квадрат: Получить фактические пиксельные координаты div после CSS3-преобразования

Я думаю, что моя проблема может быть в том, что я использую перспективу.Ниже вы можете увидеть картину лучшего, что я смог получить (черная рамка).

enter image description here

У меня есть следующий код: 

.card {
    position: absolute;
    top: 100px;
    left: 500px;
    width: 20%;

    border: 2px solid white;
}

.card-rotate {
    animation: card-rotate;

    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes card-rotate {
    0% { transform: perspective(400px) rotateY(-55deg) }
    100% { transform: perspective(400px) rotateY(-75deg) }
}

***************** РЕДАКТИРОВАТЬ:

после использования get getClientRects () Я приблизился, но все еще не совсем то, что мне нужно: 

    let card = document.querySelector(".card");
    console.log(card.getClientRects());

    // I relized that most of the following variables are useless, sorry for the confusion they were there for another attempt I made

    let nwx = card.getClientRects()[0].left;
    let nwy = card.getClientRects()[0].top;
    let nex = card.getClientRects()[0].right;
    let ney = card.getClientRects()[0].top;
    let sex = card.getClientRects()[0].right; // also I got to name a variable sex, which is kind of cool
    let sey = card.getClientRects()[0].bottom;
    let swx = card.getClientRects()[0].left;
    let swy = card.getClientRects()[0].bottom;

    let path = document.getElementById("cardArea");

    let pathString = "M" + nwx + " " + nwy;
    pathString += " L" + nex + " " + ney;
    pathString += " L" + sex + " " + sey;
    pathString += " L" + swx + " " + swy;
    pathString += " L" + nwx + " " + nwy;

    path.setAttributeNS(null, "d", pathString);

enter image description here

Редактирование для удара

...