Выяснение новых X и Y на основе вращения - PullRequest
Новая
       23

Выяснение новых X и Y на основе вращения

0 голосов
/ 04 февраля 2020

Я обнуляю графический редактор, где вы можете выбирать элементы, масштабировать их, вращать, изменять размер и т.д. c. Одна вещь, на которой я застрял - это позиционирование элемента после его поворота. У меня есть следующий класс javascript, который обрабатывает изменение размера: 

const rotateCoords = (x, y, rotation) => {
    const rad = (rotation * Math.PI) / 180
    return {
        y: y * Math.cos(rad) - x * Math.sin(rad),
        x: x * Math.cos(rad) + y * Math.sin(rad),
    }
}

export default (
    e,
    ratio,
    resizeDirection,
    resizeMouseX,
    resizeMouseY,
    zoomScale,
    rotation
) => {
    let resizeMouseX = e.pageX - resizeMouseX
    let resizeMouseY = e.pageY - resizeMouseY

    const newResize = rotateCoords(resizeX, resizeY, rotation)
    resizeX = newResize.x
    resizeY = newResize.y

    let x = 0,
        y = 0,
        width = 0,
        height = 0

    if (resizeDirection === 'r') {
        width = resizeX
    }

    if (resizeDirection === 'l') {
        x = resizeX
        width = -resizeX
    }

    if (resizeDirection === 't') {
        y = resizeY
        height = -resizeY
    }

    if (resizeDirection === 'b') {
        height = resizeY
    }

    if (resizeDirection === 'tr') {
        width = resizeX * ratio
        height = resizeX
        y = -resizeX
    }

    if (resizeDirection === 'br') {
        width = resizeX * ratio
        height = resizeX
    }

    if (resizeDirection === 'bl') {
        width = -resizeX * ratio
        height = -resizeX
        x = resizeX * ratio
    }

    if (resizeDirection === 'tl') {
        width = -resizeX * ratio
        height = -resizeX
        x = resizeX * ratio
        y = resizeX
    }

    return {
        x: x / zoomScale,
        y: y / zoomScale,
        width: width / zoomScale,
        height: height / zoomScale,
    }
}

Различные условия изменяют размер контейнера элемента на основе перетаскиваемого якоря (внизу слева, вверху справа и т. Д. c.). Они будут возвращать что-то как (x: -2, y: 1) или (ширина: -2, высота: 0), в зависимости от того, какая привязка перетаскивается. Это прекрасно работает, когда элемент вращается с нуля. Однако, когда элемент поворачивается (например, transform: rotate(30deg), x и y выходят из строя, и элемент начинает плавать в разных направлениях в зависимости от угла поворота. Я предполагаю, что мне нужно сделать некоторые вычисления для возвращенного X и Y, чтобы он остался на месте. Может кто-нибудь, пожалуйста, помогите мне разобраться в этом, это будет высоко ценится!

...