Need private packages and team management tools?Check out npm Teams »

@dougalg/pan-handler

1.0.1 • Public • Published

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.

Install

npm i @dougalg/pan-handler

DownloadsWeekly Downloads

0

Version

1.0.1

License

ISC

Unpacked Size

49 kB

Total Files

31

Last publish

Collaborators

  • avatar