Custom clickable component

  • Replies:6
Harri E
  • Forum posts: 3

Apr 10, 2012, 3:51:51 PM via Website

Hallo,

at first i want to indruduce what i want to do:

I want to create a custom view element which i can handle input events from.
Custom view component should be a real custom figure i draw on myself, no image file.
Lets say e.g a snake.

How i tried to do this:

1.) View class ClickableShape
I created a class ClickableShape inheriting from View.
I overrided the method onDraw where i draw my "snake" figure.

2.) Input event handling
I also overrided the method onTouchEvent of ClickableShape.
But now all "klicks" on any place on canvas is recognised.
What i want to do is just capture the events on the figure itself. Lets say on the snakes body.

Is that possible with standard mechnism?

Maybe i have to get the click coordinates and the coordinates of the sanke body itself and check whether the click coordinates is inside?
If so, is there a known way to get the neccessary information? (Snake as coordinate list?)

Or am i totally on the wrong way? Maybe i took the wrong approach?

Kind regards
Harri E.

Reply
Eric McBride
  • Forum posts: 1,790

Apr 10, 2012, 5:32:07 PM via Website

Thanks for your support Jeremiah :-D

Reply
Jeremiah
  • Forum posts: 775

Apr 10, 2012, 5:34:50 PM via Website

Eric McBride
Thanks for your support Jeremiah :-D

Always glad to help.

Reply
Harri E
  • Forum posts: 3

Apr 10, 2012, 8:16:36 PM via Website

Sorry if my description was misleading.
Of course the ClickableShape is not part of the API.
Its the class i created inheriting from class VIew.

The OnClickListener behavious exactly like the onTouchEvent i have overridden.

The problem is that both methods are called when clicked everywhere on the canvas which of course is much bigger than my shape.

Reply
Jeremiah
  • Forum posts: 775

Apr 10, 2012, 11:49:18 PM via Website

You could try using the MotionEvent.getX() and .getY() supplied by the onTouchEvent, to see if the (x,y) coordinate of the touch is within the bounds of your view.

Reply
Jeremiah
  • Forum posts: 775

Apr 11, 2012, 12:04:33 AM via Website

I think what your trying to do here is tell if the user has clicked on your snake. Unless you just want a rough estimate if they clicked the snake's icon... use the x,y position of the snake and it's width/height. If you need more precise (per pixel collision detection), there is some math involved. One method is to shoot a ray from the point of the click to the side of the screen. If it passes through the "bounds/path" of your snake once or an odd number of times, the click is inside the snake, if it passes through twice or an even number of times it's outside the snake (mathematically). There is a tutorial on how to do it here: http://rocketmandevelopment.com/2010/07/08/as3-2d-ray-casting-for-collision-detection/

Alternately you could switch over to openGL and use a 3rd party sprite library that will do all this for you. I don't think the android api's or canvas has any built in options to do this.

Reply