Question: Possible to zoom without distorting canvas? about react-canvas-draw HOT 8 CLOSED

I needed this too, so I built it! #87

from react-canvas-draw.

@markbiddlecom the hero we don't deserve! Thanks a ton- will definitely be checking out your PR and giving it a shot as soon as I have a chance.

from react-canvas-draw.

I needed this as well. Manged to do it by monkey patching the getPointerPos method. It doesn't look like a long-term solution so I'd be really happy to have it as an exposed API 👍

from react-canvas-draw.

Mind sharing a bit more about how you rigged it up?

from react-canvas-draw.

@petedejoy It's a combination with the react-zoom-pan-pinch package.

I basically change/monkey patch the getPointerPos method when I store the canvas object ref:

  patchCanvas = (canvasObj, scale) => {
    if (canvasObj) {
      this.canvasObj = canvasObj;

      // TODO: This is copy-pasted from the package. The only change is we divide the result by the scale from the zoom.
      this.canvasObj.getPointerPos = e => {
        const rect = this.canvasObj.canvas.interface.getBoundingClientRect();

        // use cursor pos as default
        let clientX = e.clientX;
        let clientY = e.clientY;

        // use first touch if available
        if (e.changedTouches && e.changedTouches.length > 0) {
          clientX = e.changedTouches[0].clientX;
          clientY = e.changedTouches[0].clientY;
        }

        // return mouse/touch position inside canvas
        return {
          x: (clientX - rect.left) / scale,
          y: (clientY - rect.top) / scale
        };
      };
    }
  };

// ...
// in render
// ..

<TransformComponent>
  <CanvasDraw ref={canvasObj => this.patchCanvas(canvasObj, scale)} />
</TransformComponent>

If the CanvasDraw expects such prop, this can be safely added to the real getPointerPos method I think. Do you think PR with such a thing is okay?

from react-canvas-draw.

Ahh, that's interesting! I'll try to follow along and implement a similar function when I have a chance. I'm not sure how much of a lift it'd be to PR your patchCanvas()as a default prop of some kind, but it's definitely something I would put to use if that's of any influence.

from react-canvas-draw.

Hey @martin056, how did you access the scale prop from Transform wrapper? I'm just not sure how scale is defined your example

from react-canvas-draw.

The hero we don't deserve indeed. Merged his PR finally (sorry for the delays), so this feature will be part of v1.2.0

from react-canvas-draw.