Question: Possible to zoom without distorting canvas?

[petedejoy]

Does anyone know if there's an elegant way to zoom in on the canvas to observe items/draw "up-close" without distorting the larger image? If there's a way to implement this and folks would find it useful, I'm happy to PR it as a default prop of the CanvasDraw component.

[martin056]

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 :+1:

[petedejoy]

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

[martin056]

@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?

[petedejoy]

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.

[elimauskopf]

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

[markbiddlecom]

I needed this too, so I built it! https://github.com/embiem/react-canvas-draw/pull/87

[petedejoy]

@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.

[embiem]

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