ASP.NET - Imagenes Editables

He estado preguntando y me dijeron que con javascripts podia llegar a poner una imagen editable en mi pagina asp, lo que yo necesito es hacer una plantilla como una boca donde se puedan marcar los dientes dañados ya sea con una line o x pero no tengo idea, no se si me pueden orientar, si hay algun metodo, esta plantilla debo guardarla como un registro..... estuve buscando pero lo que encontre no es lo que necesito y pues espero que alguien me pueda decir si se les ocurre alguna cosa, gracias.

Se me ocurre que hagas la imagen completa de una boca con sus dientes, sobre cada uno de los dientes pon un picturebox en la imagen de un diente dañado, por default oculta que no llame el diente dañado y cuando den un clic sobre el diente que llame la imagen de diente dañado, aqui tendrás que valida el clic sobre cada picturebox para que llame o oculte la imagen del diente dañado, por ultimo deberás tener una variable en cada picturebox como boolean, .T. esta el diente dañado, .F. esta la imagen oculta, con esta bandera podrás guardar el registro.

Saludos

http://www.ichilango.com

Asi de manera simple podrias poner la imagen de la boca.
Pones como herramientas, un boton que agrege marcas, que podria ser otra imagen png transparente con marco. Estos marcadores los vas creando dinamicamente como un arreglo de controles. Cada uno ira guardando su posicion absoluta en la imagen de la boca.
Si te complica usar arrastrar y soltar, puedes poner flechas para mover ese marcador.
Una vez localizado el diente, el cual quedaria encerrado por el marcador, ya estas en posicion de poder guardar el arreglo de controles (marcadores), donde deberas guardar la cantidad, y sus respectivas posiciones, para poder volver a crearlos una vez que necesites recargar la aplicacion.

Deberas crear algoritmos para poder trabajar en base a porcentajes para las posiciones, asi haces que al ampliar o reducir la imagen de la foto de la boca, tambien lo hagan los controles.

Ejemplo:

Imagen boca: 100px x 100 px
Marcador 1 en posicion: Horizontal: 50px - Vertical. 50px

Llevado a pixeles es facil, al recargar la aplicacion pondras el marcador 1 en la posicion 50 H - 50 V

Que pasa si generas una ampliacion impresa de la imagen, ahora asi:

Imagen boca: 500px x 500 px
Marcador 1 en posicion: Horizontal: 50px - Vertical. 50px, esto ya no serviria. Deberas llevarlo a porcentajes del original.
Regla de 3: (50 * 100) / 100 = 50%
Valor nuevo: 1000 px * 50% = 500px

Tendrias que llevar la nueva posicion a: Horizontal: 500px - Vertical. 500px

NOTA: La posicion que uso para el ejemplo, asume el punto medio del marcador.
Si quieres usar la coordenada superior izquierda, deberas complementar con funciones para trabajar con el ancho del objeto.


Espero te sirva.

Saludos