ruler
ruler copied to clipboard
How to scale a Ruler component centered on the mouse pointer position
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
you can access canvasElement
property.
ref={rulerRef}
rulerRef.current.canvasElement // HTMLCanvasElement