Tengo que mostrar una bonita imagen de un mapa de Europa, y quiero que mi aplicación para, por ejemplo, llevar una actividad diferente, cuando el usuario hace clic en cada país de cada país en el mapa se debe tener un onClickListener (o equivalente).

Esencialmente, necesito ser capaz de llamar a una función diferente cuando el usuario pulsa en Francia en lugar de España en una imagen como esta:
http://commons.wikimedia.org/wiki/File:Blank_map_of_Europe_cropped.svg

¿Cómo puedo mejor ir sobre esto en Android?

Tengo ideas, pero no puede ser una manera sencilla de que estoy con vistas.

Muchas gracias de antemano!

Saludos,
r3mo

  • Cómo en la tierra sería capaz de deducir el país desde el punto pulsado? En el mejor de los que el oyente sabe las coordenadas de la pantalla y eso es todo. Ella no tiene idea de donde las fronteras nacionales fueron en la pantalla
  • De hecho, el oyente sólo sería conocer las coordenadas clic. De dos maneras: hacer que el mapa se compone de muchas imágenes con los oyentes, uno para cada país, todos superponen en cierta medida, por lo que el mapa parece correcto. Tal vez hay algún método para hacerlo? Alternativamente, voy a ser la coloración de cada país de la misma forma ligeramente diferente (1 bit), de manera que todos ellos tienen el mismo aspecto, pero puedo comprobar el color en la imagen coordinar clic y mira que en una tabla para saber qué país de que color corresponde. Aunque agradezco que se haya tomado el tiempo para comentar, tal vez alguien puede intentar ser más útil?
  • Posibles duplicados de clickable área de la imagen
InformationsquelleAutor r3mo | 2010-10-18

4 Comentarios

  1. 31

    Aquí es cómo he resuelto un problema similar.

    Primer duplicar la imagen que desea utilizar como un mapa de imagen y el color de cada sección. No hace falta decir, un color diferente para cada sección :D. Luego crear dos ImageViews en su diseño. Establecer el fondo de la primera como de la imagen que desea que aparezca la pantalla y el fondo de la segunda, como la de colores en uno.

    A continuación, establecer la visibilidad de la segunda ImageView invisible. Si ejecuta el programa en este punto usted debe ver la imagen que desea mostrar. A continuación, utilice un OnTouch escucha y obtener el color del píxel donde te ha tocado. El color se corresponde con el de los colores de la imagen.

    La siguiente getColour método sería necesario pasar las coordenadas x e y de los eventos de toque. R. id.img2 es la imagen invisible.

    private int getColour( int x, int y)
    {
        ImageView img = (ImageView) findViewById(R.id.img2);
        img.setDrawingCacheEnabled(true); 
        Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache()); 
        img.setDrawingCacheEnabled(false);
        return hotspots.getPixel(x, y);
    }

    Espero que esto fue de ayuda para ti :).

    • ¿sabes de algún tutorial que tiene este método implementado, o algún código de ejemplo disponibles?
    • No trabajo con Config.RGB_565, trabajó con: mapa de bits.Config.ARGB_8888
    • ¿cómo se llegó a saber que hot spot es tocado si hay muchos de los puntos calientes están en la imagen.
    • Hay un bonito tutorial explicar este paso a paso. Espero que sea útil para alguien.
  2. 2

    Lo hice con una máscara como Scotty indicado, pero me encontré con más problemas. Básicamente los colores devuelto por getPixel eran ligeramente diferentes a los de la máscara de archivo. Yo lo que hice fue cargar la máscara en la memoria con el escalado de movilidad y con todas las opciones de color como este:

    BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
    bitmapOptions.inTargetDensity = 1;
    bitmapOptions.inDensity = 1;
    bitmapOptions.inDither = false;
    bitmapOptions.inScaled = false;
    bitmapOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;
    mask = BitmapFactory.decodeResource(appContext.getResources(), resMask, bitmapOptions);

    Entonces miré el coords a partir de la escala de imagen como esta:

    ImageView map = (ImageView) findViewById(R.id.image);
    Drawable drawable = map.getDrawable();
    Rect imageBounds = drawable.getBounds();
    int scaledHeight = imageBounds.height();
    int scaledWidth = imageBounds.width();
    int scaledImageOffsetX = Math.round(event.getX()) - imageBounds.left;
    int scaledImageOffsetY = Math.round(event.getY()) - imageBounds.top;
    
    int origX = (scaledImageOffsetX * mask.getWidth() / scaledWidth);
    int origY = (scaledImageOffsetY * mask.getHeight() / scaledHeight);
    
    if(origX < 0) origX = 0;
    if(origY < 0) origY = 0;
    if(origX > mask.getWidth()) origX = mask.getWidth();
    if(origY > mask.getHeight()) origY = mask.getHeight();

    y luego he aplicado la máscara.getPixel(origX, origY).
    Sólo funciona cuando la imagen se escala con android:scaleType=»fitXY» dentro de la ImageView de lo contrario el coords están apagados.

  3. 2

    No lo he probado, pero este se ve muy prometedor.

    Estoy a punto de probarlo en mi proyecto, espero que funcione para ustedes.

    Este tipo es, básicamente, tratando de emular Etiqueta HTML Mapa en droid con una pizca de zoom y arrastre.

  4. 1

    He seguido clausundercover la respuesta, pero aún tenía problemas con la consistencia del color de los píxeles más de una región. Lo que finalmente funcionó para mí es asegurarse de que puedo usar una imagen PNG con indexado color de la máscara. En mi caso he utilizado la web optimizada de la paleta de 216 colores) y aseguró que cualquier color que escogí fueron los valores de la paleta. Una vez que hice este cambio, tengo el mismo color de valor a lo largo de toda la región.

Dejar respuesta

Please enter your comment!
Please enter your name here