Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15650] iOS: x & y positions of "touchmove" event are incorrect and erratic

GitHub Issuen/a
TypeBug
PriorityLow
StatusReopened
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
ComponentsiOS
LabelsSupportTeam
ReporterAndrew Greenstreet
AssigneeUnknown
Created2013-11-04T17:47:27.000+0000
Updated2018-02-28T20:03:27.000+0000

Description

Problem Description

A simple draggable view, using the "touchmove" event, results in incorrect or erratic values in the event object x and y positions. When setting the view to the new position, based of the finger movement, it will appear to "jump" as the values are not sequential in nature. For example, dragging and item to the right might return x values of 1, 2, 5, 4, 6, 7, 9, 8, 11, 10, etc. C

Steps to reproduce

1. Create a new mobile project 2. Paste this code into app.js:
var index = Ti.UI.createWindow({backgroundColor:'black'});
var view = Ti.UI.createView({backgroundColor:'white'});
index.add(view);

index.addEventListener('postlayout', onWindowReady);

var baseHeight; //Original Height of View
var baseWidth;// Original Width of View

var startX; //1st touch x
var startY; //1st touch y
var lastX; //last touch x
var lastY; //last touch y
var imageX; //x position of view at start
var imageY; //y position of view at start

function onViewPinch(e) {
    view.height = baseHeight * e.scale;
    view.width = baseWidth * e.scale;
}

function onViewTouchStart(e) {

	baseHeight = view.height;
	baseWidth = view.width;

	var rect = view.rect;
	imageX = rect.x;
	imageY = rect.y;
	
	lastX = startX = e.x;
	lastY = startY = e.y;

	Ti.API.log("onImageTouchStart => "  + startX + ", " + startY);
}

function onViewTouchMove(e) {
	Ti.API.log("onImageMove Delta Last=> "  + (e.x - lastX) + ", " + (e.y - lastY));
	Ti.API.log("onImageMove E Values => "  + (e.x) + ", " + (e.y));
	
	lastX = e.x;
	lastY = e.y;
	var deltaX = e.x - startX;
	var deltaY = e.y - startY;
    view.left = imageX + deltaX;
    view.top = imageY + deltaY;
}

function onViewTouchEnd(e) {
	Ti.API.log("onViewTouchEnd Delta Last=> "  + (e.x - lastX) + ", " + (e.y - lastY));
	Ti.API.log("onViewTouchEnd E Values => "  + (e.x) + ", " + (e.y));
	var deltaX = e.x - startX;
	var deltaY = e.y - startY;
    view.left = imageX + deltaX;
    view.top = imageY + deltaY;
}

function onWindowReady(e) {
	Ti.API.log("onWindowReady");
	index.removeEventListener('postlayout', onWindowReady);
	view.addEventListener('pinch', onViewPinch);
	view.addEventListener('touchstart', onViewTouchStart);
	view.addEventListener('touchmove', onViewTouchMove);
	view.addEventListener('touchend', onViewTouchEnd);
}

index.open();
3. Run into device 4. Go with your finger moving to the upper left corner or the device, or down to the right lower corner. 5. You will see the jumping black square, even if that should happen softly.

Comments

  1. Shameer Jan 2014-09-19

    Issue exist with 3.1.4 but can't reproduce on 3.4.0 Appcelerator Studio, build: 3.3.0.201407111535 TiSDK 3.4.0 iOS : 7.0 Titanium Command-Line Interface, CLI version 3.3.0
  2. Olga Romero 2014-09-23

    Tested and reopened. The issue is still reproducible with Mac osx 10.9.5 Mavericks Appcelerator Studio, build: 3.4.0.201409161950 Titanium SDK, build: 3.4.0.v20140922135716 acs@1.0.16 alloy 1.5.0-rc2 install@0.1.7 npm@1.4.23 sudo@1.0.3 titanium 3.4.0-rc4 titanium-code-processor@1.1.1 Xcode6.0.1 (6A317) Devices: iPhone 6 iOS 8 iPhone 6+ iOS 8 iPhone5 iOS 8

JSON Source