Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @dougalg/pan-handler with all npm packages installed. Try it out:

var panHandler = require("@dougalg/pan-handler")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@dougalg/pan-handler v1.0.1

A simple zoom and pan library for canvas

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free