Databases
StackOverflow2013
Postsdbo
POHow to implement image mask?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to implement image mask?
    primarykey
    data
    text
    <p>Situtation:</p> <p>I am working on a small application which should enable user to trigger something depending on which part of the screen they clicked. Imagine a picture of a teddy bear and if you click a nose it says "nose". What I have done is put in layout xml a LinearLayout. Because I have to cover different screen sizes I didn't set background in a xml layout file.</p> <p>snippet form xml:</p> <pre><code>&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/viewMain" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="visible" &gt; &lt;LinearLayout android:id="@+id/viewThouShaltRespondToClicks" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" android:orientation="vertical" android:longClickable="true" android:visibility="visible" /&gt; &lt;!-- mask --&gt; &lt;LinearLayout android:id="@+id/viewInvisibleMask" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" &gt; &lt;/LinearLayout&gt; &lt;/FrameLayout&gt; </code></pre> <p>And then in onCreate event of activity I check the display resolution and via setBackgroundResource() set the appropriate background. I have prepared background images for each resolution.</p> <pre><code>final Point QVGA = new Point(240,320); // portrait // Obtain the screen resolution if the device Display defaultDisplay = ((WindowManager)this.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); Point displayResolution = new Point(defaultDisplay.getWidth(), defaultDisplay.getHeight()); if (displayResolution.equals(QVGA)) { viewThouShaltRespondToClicks.setBackgroundResource(R.drawable.image_to_be_clicked_upon_240x320); viewInvisibleMask.setBackgroundResource(R.drawable.mask_240x320); } else if ... // check for another resolution </code></pre> <p>Even if the image in the resources is not in the correct dimension it is stretched/shrinked to the screen size. This would be OK as long as the width-height ratio of background image is similar to ratio of display and the resulting image is not kewed to much. But there is a problem, explained below.</p> <p>To detect which region was clicked, the region itself might be irregular shaped I have taken the following approach. I create an image – mask (bmp) with same dimensions as background image only that it has a white background and the clickable areas are in different colors. The color identifies the area. All I have to is get a coordinate of a click event (no problem here), go to the mask image and read the color of pixel on this coordinates. The problem is that the mask image is not of the correct size. On my device it is set to 1200x700, but I guess it takes on some arbitrary size on other devices.</p> <p>First question: Is there a way to somehow convince the invisible layout to load background image and then stretch/shrink it to display size as it happens for visible layout by itself?</p> <p>Another approach would be to load mask image (bmp, png) into some memory structure and resize it to display size. I have tried with something like:</p> <pre><code>BitmapFactory.Options options = new BitmapFactory.Options(); options.inScaled = false; // do not scale options.inPreferredConfig = Bitmap.Config.ARGB_8888; bitmapMask = BitmapFactory.decodeResource(this.getResources(), R.drawable.mask, options); // on this place stretch shrink should follow but I have no idea how </code></pre> <p>But I don’t know how to scale Bitmap to proper size.</p> <p>Any suggestions?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAnderson
    1. USAnderson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to implement image mask?
      1. This table or related slice is empty.
      1. VTDownMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload