0

codesandbox link: https://codesandbox.io/s/canvas-zoom-in-out-drag-5moy48

HI! I need to click on particular item on the canvas while zooming and moving functionalities also enable for canvas

But now i need to calculate the rectangle position relative to the canvas, after zoom the canvas. Whats the maths behind the zooming. If anyone knows please help in this. Thank you.

124 line

downHandler(ev: PointerDownEvent) {
    const { clientX, clientY } = ev;
    // How get current canvas position after zoom in/out or drag
    const startX = ?;
    const endX = ?;
    const startY = ?;
    const endY = ?;
    if (
      startX < clientX &&
      endX > clientX &&
      startY < clientY &&
      endY > clientY
    ) {
      // image canvas
    }
  }
Jihye.Park
  • 1
  • Link [Inverse transform](https://stackoverflow.com/a/34598847/3877726) to how to calculate an inverse matrix used to convert screen coordinates to world (transformed) coordinates. You can also use the [`DOMMatrix`](https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix) returned by `getTransform`. It provides functionality to do the same. – Blindman67 Jul 18 '22 at 20:51
  • We need to see the code that does the zooming and dragging, in the question itself, jot outsourced to another website. There are many ways these could be implemented and the solutions would depend on it. – Kaiido Jul 19 '22 at 23:06

0 Answers0