useZoom

Controls the zoom level and pan position of the canvas editor.

Import

import { useZoom } from "@asset-studio/core";

Usage

function ZoomControls() {
  const { zoom, setZoom, zoomIn, zoomOut } = useZoom();

  return (
    <div>
      <button onClick={zoomOut}>-</button>
      <span>{Math.round(zoom * 100)}%</span>
      <button onClick={zoomIn}>+</button>
      <button onClick={() => setZoom(1)}>100%</button>
    </div>
  );
}

Return Value

Property / Function	Type	Description
zoom	number	Current zoom level. 1 = 100%.
setZoom	(value: number) => void	Set an explicit zoom level.
zoomIn	() => void	Increase the zoom level.
zoomOut	() => void	Decrease the zoom level.

Notes

• Users can also zoom with the scroll wheel on the canvas.