https://github.com/component/pinch

pinch in and out on elements on handheld devices
https://github.com/component/pinch

Last synced: 12 days ago
JSON representation

pinch in and out on elements on handheld devices

• Host: GitHub
• URL: https://github.com/component/pinch
• Owner: component
• Created: 2013-08-30T23:46:40.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2017-06-16T10:30:10.000Z (over 7 years ago)
• Last Synced: 2024-05-08T17:10:39.702Z (8 months ago)
• Language: JavaScript
• Homepage: http://component.github.io/pinch/
• Size: 238 KB
• Stars: 56
• Watchers: 10
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# pinch

  pinch in and out on elements on handheld devices.

## Installation

  Install with [component(1)](http://component.io):

    $ component install component/pinch

## Example

```js

pinch(img, function(e) {

  dot.style.left = e.x + 'px';

  dot.style.top = e.y + 'px';

  dot.style['-webkit-transform'] = 'scale(' + e.scale + ')';

});

```

## API

### Pinch(el, fn)

  Initialize `Pinch` with the element `el` and callback function `fn`.

```js

pinch(img, function(e) {

  var midpoint = { x: e.x, y: e.y };

  var scale = e.scale;

});

```

The event object `e` is augmented with following keys:

- `x`: the x coordinate of the midpoint between your two fingers

- `y`: the y coordinate of the midpoint between your two fingers

- `scale`: the relative distance between your two fingers starting at 1.

### Pinch.unbind()

  Unbind

## TODO

* add `e.rotate` support for android

## License

  MIT