authenticate user based on tap location in image in alloy app

Question

I am building an alloy app where I have the requirement to authenticate a user based on his tap location on an image, loaded with ImageView. The image has few marked points of authentication, any of which when tapped on, shows whether the tap location was right or wrong. How can I build this?

So far, I am only able to get the tapped location in a touch event listener and the image's properties using ImageView's rect property. How can I pinpoint the marked locations in the image to identify a tap over those specific positions?

Here is the code I am using (derived from this: How to convert coordinates of the image view to the coordinates of the bitmap?):

    // eventX, eventY are x and y coordinates of tapped location
    function getScaledCoordinates(imageView, eventX, eventY) {
    //original height and width of the image 
    var originalImageBounds = imageView.toBlob();                                                                                                                                                                 
    var intrinsicHeight = originalImageBounds.height;
    var intrinsicWidth = originalImageBounds.width;

    //height and width of the visible (scaled) image
    var imageBounds = imageView.getRect();                                                                                                                                                         
    var scaledHeight = imageBounds.height;
    var scaledWidth = imageBounds.width;

    //Find the ratio of the original image to the scaled image                                                                                                                                                                                                                                                                                           
    var heightRatio = intrinsicHeight / scaledHeight;
    var widthRatio = intrinsicWidth / scaledWidth;

    //get the distance from the left and top of the image bounds                                                                                                                                             
    var scaledImageOffsetX = (eventX - imageBounds.x);
    var scaledImageOffsetY = (eventY - imageBounds.y);

    // get the units in device pixel                                                                                                                                                                         
    // getUnitsInDevicePixel(scaledImageOffsetX, scaledImageOffsetY)

    //scale these distances according to the ratio of your scaling                                                                                                                                                                                                                                                                                                                      
    var originalImageOffsetX = scaledImageOffsetX * widthRatio;
    var originalImageOffsetY = scaledImageOffsetY * heightRatio;

    // Return the coordinates in original image adjusted for scale factor                                                                                                                                    
    return [originalImageOffsetX, originalImageOffsetY];
}

I have coordinates of the original marked points stored in a data structure. I am even able to get this to work, but the solution lacks accuracy. Sometimes, the tapped location is mapped correctly to the original image, other times it's not. Any suggestions to improve on this?

I was looking for something along the lines of clickable area of image, but can't find enough documentation to implement these in Titanium. Also, I read about the idea of placing invisible buttons at the marked locations, but not sure how to get this working in Titanium.

Any help will be appreciated. Thanks in advance!