0

I'm nuilding a graphical editor where you can select elements, scale them, rotate, resize etc. One thing I've been stuck on is positioning an element after it's rotated. I have the following javascript class that handles resizing:

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,
    }
}

The different conditions resize the element container based on the anchor that's dragged (bottom left, top right etc.) They will return something like (x: -2, y: 1) or (width: -2, height: 0) based on which anchor is dragged. This works fine when the element is at 0 rotation. However when the element is rotated (for example transform: rotate(30deg), the x and y get out of whack and the element starts floating around in different directions based on it's rotational angle. I'm assuming I need to do some calculation on the returned X and Y to have it stay in place. Could anyone please help me figure this out, it would be much appreciated!

elmgo
  • 21
  • 3
  • Sounds like you need to more thoroughly keep track of local and global coordinates. – Yunnosch Feb 04 '20 at 14:21
  • What is typically done to rotate, is subtract the center of the object, rotate and then add the center again. – JohanC Feb 04 '20 at 14:31
  • The rotation works just fine. However when you apply rotation with css the X and Y axis of the object get rotated as well. So now, changing the X and Y moves it on the rotated axis instead of the global ones. – elmgo Feb 04 '20 at 14:34
  • use uniform transform matrices see [Understanding 4x4 homogenous transform matrices](https://stackoverflow.com/a/28084380/2521214) for 2D you need just 3x3 matrices ... to rotate around center you need to translate the center to (0,0) rotate and than translate back ... beware the difference between local and global transformations (more about it in the previous link) ... see: [simple drag&drop](https://stackoverflow.com/a/20924609/2521214) for some inspiration on the code architecture of the GUI editor – Spektre Feb 05 '20 at 08:58

0 Answers0