当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - authenticate user based on tap location in image in alloy app

问题描述:

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!

分享给朋友:
您可能感兴趣的文章:
随机阅读: