Naivete Precedes Misrepresentation

    @dougalg/pan-handler
    TypeScript icon, indicating that this package has built-in type declarations

    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

    • dougalg