CODEWITHSUNDEEP
javascriptangularjsionic-frameworkhammer.js
Terence Chow
Terence Chow

Reputation: 11163

something equivalent to 'pinchstart' in hammer js? changing height of div

I am creating a cordova app in the ionic framework which uses hammer.js gestures

When you use the drag gesture there are corresponding dragstart and dragend gestures which capture the start and end of a drag in addition to the actual dragging. This is useful because sometimes you need to know the information at drag start.

I don't see an equivalent for pinch gesture, but is there something else that can be done to obtain this information?

I am using pinch to change the height of a div.

My problem is that, if I don't know the height at the start of a pinch, then the only height I know is the current height. And since I'm changing the height with the pinch, this has an exponential effect on the height and it changes quite quickly. (example 1 below)

If I change the height with e.gesture.scale and set height as a %, then I don't know the height of the div if someone were to stop pinching and restart later. This has the visual effect of starting the pinch at 100% again, and this is quite jarring on the eyes. (example 2 below)

example 1 problem: height changes exponentially because only height I have changes with the pinch

height = e.gesture.startEvent.target.offsetHeight * e.gesture.scale + "px"

Not sure why e.gesture.startEvent.target.offsetHeight changes, I assumed it was constant but it is not.

example 2 problem: On a second pinch it is jarring on the eyes because the initial height always starts at 100% even if the pinch already scaled the div down.

height = e.gesture.scale*100 +"%"

Ideal scenario If I had the height at the start of a pinch I could do something like:

height = pinchStartHeight*e.gesture.scale + "px"

which would make it scale perfectly since pinchStartHeight would presumably be constant.

Any pinchStart equivalents or anything that might lead me to a solution on my problem?

Upvotes: 2

Views: 1100

Answers (1)

Guglie
Guglie

Reputation: 2451

A pinchstart event is defined here in the HammerJS documentation.
I usually store (in a variable) scale (and also translate) values on touch end because in hammerJS those values always refer to current gesture.

Upvotes: 1

Related Questions