dy / Pan Zoom
Licence: mit
Pan / zoom for any element
Stars: ✭ 77
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Pan Zoom
Indoorjs
Indoor mapping for floorplans using on fabricjs
Stars: ✭ 59 (-23.38%)
Mutual labels: grid, plot
Glsl Grid
Draws an antialiased grid along the X/Y/Z direction of a mesh.
Stars: ✭ 57 (-25.97%)
Mutual labels: webgl, grid
Axentix
Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. The easy layout control and grid system makes it one of the most easy to learn framework.
Stars: ✭ 75 (-2.6%)
Mutual labels: grid
Jp
dead simple terminal plots from JSON data. single binary, no dependencies. linux, osx, windows.
Stars: ✭ 1,184 (+1437.66%)
Mutual labels: plot
Ecommerce Netlify
🛍 A JAMstack Ecommerce Site built with Nuxt and Netlify Functions
Stars: ✭ 1,147 (+1389.61%)
Mutual labels: grid
React Ape
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
Stars: ✭ 1,183 (+1436.36%)
Mutual labels: webgl
Path planning
This repository contains path planning algorithms in C++ for a grid based search.
Stars: ✭ 70 (-9.09%)
Mutual labels: grid
Lagrit
Los Alamos Grid Toolbox (LaGriT) is a library of user callable tools that provide mesh generation, mesh optimization and dynamic mesh maintenance in two and three dimensions.
Stars: ✭ 67 (-12.99%)
Mutual labels: grid
Magnum Plugins
Plugins for the Magnum C++11/C++14 graphics engine
Stars: ✭ 66 (-14.29%)
Mutual labels: webgl
React Native Grid List
🌁 Grid list component implemented with FlatList
Stars: ✭ 74 (-3.9%)
Mutual labels: grid
3d Game Shaders For Beginners
🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Stars: ✭ 11,698 (+15092.21%)
Mutual labels: webgl
Magnum Bootstrap
Bootstrap projects for Magnum C++11/C++14 graphics engine
Stars: ✭ 69 (-10.39%)
Mutual labels: webgl
Phaser Ce
Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Stars: ✭ 1,186 (+1440.26%)
Mutual labels: webgl
Hyper3d Envmapgen
Pre-filtered mipmapped radiance environment map generator that runs on WebAssembly.
Stars: ✭ 77 (+0%)
Mutual labels: webgl
pan-zoom
Panning and zooming events for any target. May come handy for webgl, canvas, svg, images or pure html manipulations. Handles mobile pinch-zoom, drag and scroll interactions, provides inertial movement.
See demo.
const panzoom = require('pan-zoom');
let unpanzoom = panzoom(document.body, e => {
// e contains all the params related to the interaction
// pan deltas
e.dx;
e.dy;
// zoom delta
e.dz;
// coordinates of the center
e.x;
e.y;
// type of interaction: mouse, touch, keyboard
e.type;
// target element event is applied to
e.target;
// original element event started from
e.srcElement;
// initial coordinates of interaction
e.x0;
e.y0;
});
// call to remove panzoom handler from the target
unpanzoom()
See test.js
for basic use-case.
Alternatives
- @soulfresh/pan-zoom − compatible fork with elaborate API and fixes.
Credits
This package puts together high-quality tiny components, so acknowledgment to their authors:
- impetus by Chris Bateman @chrisbateman handles inertial drag.
- mouse-wheel by Mikola Lysenko @mikolalysenko covers cross-browser wheel event.
- touch-pinch by Matt DesLauriers @mattdesl handles mobile pinch gestures.
- touch-position by Matt DesLauriers @mattdesl tracks mouse and touch coordinates.
License
© 2017 Dmitry Yv. MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].