Titanium touchmove position

Question

I have this in the view index.xml:

<Alloy>
    <Window class="container" fullscreen="true">
        <View id="accueil">
            <ImageView id="button_way"></ImageView>
        </View>
    </Window>
</Alloy>

and this in the controllers index.js

$.accueil.addEventListener("touchmove", function(e){
    Ti.API.info(e.y);
});

My problème are if i start click in the imageview and i move the absolute position are to the image view and not to the view.

I don't no why...

Can you help me, thanks, and sorry for my english.

score 4 · Accepted Answer · answered Mar 15 '14 at 13:11

4

The touchmove event's coordinates are always relative to the view in which the initial touch occurred.

You need to convert the points in the image, to the points in the containing view, thankfully Titanium provides a helper method for that: convertPointToView

I'm not sure exactly what you are trying to accomplish but here is an example of using this function, apply it to what you need to do:

$.accueil.addEventListener("touchmove", function(e){
    // If the points are in the image, convert them to the containing view 
    if(e.source == $.button_way) {
        var imageViewPoint = { x e.x, y : e.y };
        // Translate from button_way to accueil point of view
        var accueilViewPoint = $.button_way.convertPointToView(imageViewPoint, $.accueil);  
        Ti.API.info(accueilViewPoint);   
    } else {
        // Otherwise just leave them
        var accueilViewPoint = { x e.x, y : e.y };
        Ti.API.info(accueilViewPoint);
    }
});

answered Mar 15 '14 at 13:11

Josiah Hester

6,065
1
24
37

Thanks i try this. I use the touchEnabled option and it's ok too. Whats the best for you touchEnabled or convertPointToView ? – Duallip Mar 15 '14 at 13:32
Depends on what you are doing. But do whatever is easiest to code and understand! – Josiah Hester Mar 15 '14 at 14:25
@JosiahHester: I need a clarification on the unit of the values returned by e.x/e.y. I have a requirement to detect the coordinate tapped on the image and scale it to original image coordinates. The problem is I get image's width*height as 320*400 using ImagView's rect property, which almost covers the entire screen on my device. But when I tap on image and record the coordinates, they show (x,y) values like (500,600) etc, which are bigger than image's dimensions. What is the reason for this, and in what units is this returned? How can I address this? – learner123 May 08 '16 at 12:55

score -1 · Answer 2 · edited Aug 25 '16 at 09:32

Here is perfect solutions for all devices:

var circle = Ti.UI.createView({
height:300,
backgroundColor: 'red',
width:250
});
$.win.add(circle);

var item1 = Ti.UI.createImageView({
top:'0',
id:'item1',
//left:'0',
width:'50',
height:'50',
zIndex:'1',
backgroundColor:'green',
image:'/burger_menu.png'
});
circle.add(item1);

var wth = item1.getWidth()/2;
var hgt = item1.getHeight()/2;

item1.addEventListener('touchmove', function(e) {
touchMove(item1 , e);

});

function touchMove(obj , e)
{

var convertedPoint = obj.convertPointToView({x: e.x, y: e.y}, circle);

    if(convertedPoint != null)
    {
                item1.animate({
                left: Math.round(convertedPoint.x/Ti.Platform.displayCaps.logicalDensityFactor) - wth,  
                top: Math.round(convertedPoint.y/Ti.Platform.displayCaps.logicalDensityFactor) - hgt ,
                duration: 1 
                   });      
    }
}

$.win.open();

This answer has been flagged as low quality. If it answers the question, consider adding a bit of text to explain how it works. — lmo, Aug 24 '16 at 22:30

Titanium touchmove position

2 Answers2