pinch scale for mobile browsers that don't support it (Chrome)

This commit is contained in:
Gavin McDonald
2018-09-23 22:07:00 -04:00
parent ad54304c30
commit 25fd30a2fa

View File

@@ -124,6 +124,7 @@ export default class OnTap {
if (event.touches.length > 1) {
this.state.pinching = true;
this.state.scaleStart = Math.sqrt(Math.pow(touches[0].pageX - touches[1].pageX, 2) + Math.pow(touches[0].pageY - touches[1].pageY, 2));
clearTimeout(this.state.pressTO);
}
@@ -198,6 +199,7 @@ export default class OnTap {
if (event.touches.length === 0) {
this.state.pinching = false;
this.state.scaleStart = null;
this.state.moving = null;
this.state.lastX = null;
this.state.lastY = null;
@@ -236,6 +238,10 @@ export default class OnTap {
if (this.state.tapStartTime) {
const touches = [...event.touches];
event.scale = event.scale ? event.scale :
touches.length < 2 ? 1 :
Math.sqrt(Math.pow(touches[0].pageX - touches[1].pageX, 2) + Math.pow(touches[0].pageY - touches[1].pageY, 2)) / this.state.scaleStart;
Object.assign(event, {
offsetX: touches.reduce((memo, touch) => memo + touch.pageX, 0) / touches.length,
offsetY: touches.reduce((memo, touch) => memo + touch.pageY, 0) / touches.length,