Android Question Need help to draw a grid on canvas

[tsteward]

I'm trying to draw a grid over a car key that represents the measurements of where the cuts on the key should be.
Then allow the user to stretch the key to align with the grid and get a visual way to decode the key.

I am having trouble trying to accurately draw the grid. The measurements in the data are actual measurements which I scale so it will all fit on the panel.
Have a look at the attached project and from the drop down select Key2 ONLY. This contains the correct data for the key pictured.

Any help appreciated.

 

[tsteward]

Here is a working version but there has to be a far better way?

 

[klaus]

You need to give more detailed explanations on what exactly you want to achieve.
What do the two horizontal red lines represent, or with which part of the key they must be aligned ?
Where, or on what part of the key should the vertical blue lines be aligned ?
And the same for the horizontal ones.

When you load the image of the key, you fill the Panel but you do not respect the width / height ratio.
I would do the zoom with a Seekbar and move the image with a Touch event like in the attached project.

 

[tsteward]

Thank you for your assistance Klaus,
Yes your right I need to load the image without distorting it, but then the ratios need to be changed to make the key
A: fill the grid correctly and
B: align the cuts with the blue lines.
So it should be like the attached image. Perhaps I can find a better image.
I hope this is a better explanation.

In this case:
The red vertical line is aligned with the shoulders of the key
The red horizontal lines align with the top and bottom of the key blade
The blue vertical lines should align with the centre of each cut in the key
The blue horizontal line align with the base of each cut.
This gives the user a chance to visually decode the key.

This key has 10 cuts with 5 possible depths from 1 to 5
The key code is 1112343453 i think