PinchEvent — Kuito Documentation

Usage

Zoom content with a pinch.

tsx

// Zoom content with a pinch.
import { Image, motion, pinch, spring, type PinchEvent } from 'kuito';

function Zoomable() {
  const zoom = pinch().release(spring());
  const scale = motion(1).follows(zoom.scale);

  const report = (event: PinchEvent) => console.log(`zoomed to ${event.scale.toFixed(1)}x`);

  return (
    <Image
      src="https://example.com/map.png"
      width={300}
      height={300}
      scale={scale}
      gestures={[pinch({ onEnd: report }), zoom]}
    />
  );
}

Type declaration

export interface PinchEvent extends GestureEvent {
  scale: number;
  focalX: number;
  focalY: number;
  velocity: number;
}

Members 7

Name	Type	Required	Description
`scale`	`number`	Yes	—
`focalX`	`number`	Yes	—
`focalY`	`number`	Yes	—
`velocity`	`number`	Yes	—
`state`	`number`	Yes	—
`numberOfPointers`	`number`	Yes	—
`pointerType`	`number`	Yes	—

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.