Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ClickPan

A simple click and drag to pan handler

import { PanHandler } from 'pan-handler/PanHandler.js';
import { clickPan } from 'pan-handler/plugins/ClickPan.js';

const ctx = document.getElementById('myCanvas').getContext('2d');
const panHandler = new PanHandler(ctx, PAN_OPTIONS);

const clearAndDraw = () => {
    panHandler.clear();
    // Your draw logic here...
};

const clickPan = new ClickPan((deltaX, deltaY) => {
    panHandler.pan(deltaX, deltaY);
    clearAndDraw();
});
clickPan.addTarget(ctx.canvas);

Hierarchy

  • ClickPan

Index

Constructors

Methods

Constructors

constructor

Methods

addTarget

  • addTarget(target: HTMLElement): void
  • Attach mousedown/up/move handlers to an element. When that element is clicked and dragged the OnPan callback will fire.

    You may call addTarget multiple times with different elements to attach handlers to multiple elements.

    Parameters

    • target: HTMLElement

    Returns void

Generated using TypeDoc