Options
All
  • Public
  • Public/Protected
  • All
Menu

@dougalg/pan-handler

Pan Handler 🥘

A simple zoom and pan library for canvas.

View the documentation at https://dougalg.github.io/pan-handler/.

Installation

npm install --save-dev @dougalg/pan-handler

Usage

Example

// Full default config
const options = {
    fill_style: "rgba(0, 0, 0, 0.1)",
    full_height: null,
    full_width: null,
    max_zoom: 4,
    min_zoom: 0.5,
};
const ctx = document.getElementById('myCanvas').getContext('2d');
const panHandler = new PanHandler(ctx, options);

// Custom draw function...
function draw() {
    // After each pan/zoom use, you will need to clear your canvas and draw it again
    panHandler.clear();
    ctx.beginPath();
    ctx.rect(20, 20, 20, 20);
    ctx.stroke();
    ctx.fill();
}

// Initial draw
draw();

// Zoom to a 2x level
panHandler.zoom(2);
draw(); // redraw after each call

// Zoom to a 4x level
panHandler.incrementZoom(2);
draw(); // redraw after each call

// Pan left by 500
panHandler.pan(-500, 0);
draw(); // redraw after each call

Plugins

Plugins are provided for common interfaces for zoom and pan. Please see docs for more details.

Generated using TypeDoc