ruler icon indicating copy to clipboard operation
ruler copied to clipboard

How to scale a Ruler component centered on the mouse pointer position

Open xiaopujun opened this issue 2 years ago • 1 comments

Environments

  • Framework name: react, nodejs
  • Framework version:
  • Component name: Ruler
  • Component version:^0.12.2
  • Testable Address(optional):

Description

I perfected my designer with the Ruler component, and now I want to implement a mouse point as the center, scaling the canvas while scaling the Ruler component, when using the zoom property, the component does scale, but from the effect, the zoom center is in the upper left corner, not the coordinates of the mouse; I tried getting the ruler instance using the ref attribute and calling the TRANSLATE method of the canvas instance, but it failed because the ruler component doesn't seem to be a pure canvas object

xiaopujun avatar Nov 22 '22 13:11 xiaopujun

@xiaopujun

you can access canvasElement property.

ref={rulerRef}
rulerRef.current.canvasElement // HTMLCanvasElement

daybrush avatar Nov 23 '22 17:11 daybrush