Bild verdecken/aufdecken

[erdalprinz]

Hallo,

eins vorne weg: Ich bin absoluter Neuling, also bitte nicht köpfen ;-)

Ich würde gerne wissen, wie ich ein Bild in z.B. 12 gleich große Teile unterteilen kann, welche das Bild überdecken. Beim drücken auf das Bild soll dann ein zufällig ausgewählter Teil des Bildes aufgedeckt werden. Beim wiederholten drücken ein weiterer Teil usw.

danke im vorraus.

 

[mradlmaier]

Natürlich, nur funktioniert das anders herum einfacher:
-12 Bildteile als ImageViews layout (TableLayout)
-OnClicklistener Klasse, die jeweils ein zufälliges, noch nicht aufgedecktes Bild aufdeckt, schreiben. Wenn alle 12 Bilder aufgedeckt sind, irgendeine Activity, Toast oder was immer auch der Erfolg sein soll, im OnClickListener auslösen.
-diesen OnClickListener auf allen 12 ImageViews registrieren.
-Fertig

Wenn Du den Weg von 1 Bild in 12 Teile zur Laufzeit aufteilen, gehen willst, brauchst Du eine entsprechende Bildbearbeitungsbibliothek. Gibt es veilleicht, wenn nicht, ist das keine nicht-triviale Programmier-Aufgabe, kriegst Du als Neuling sicherlich nicht hin.

 

[erdalprinz]

erst mal vielen vielen Dank für deine Antwort.

Ich denke ich habe deinen Ansatz verstanden und hoffe mal, dass ich das auch so umsetzen kann. Nur hab ich noch eine kleine Verständnisfrage: Wenn ich den von dir beschriebenen Weg gehe und möchte ein Quiz erstellen, bei dem die Bilder erraten werden sollen, mit sagen wir mal insgesamt 200 Bildern, muss ich dann doch jedes Bild in 12 Teile unterteilen und irgendwie gucken, dass die dann wieder in der richtigen Reihenfolge zusammengesetzt werden oder?

 

[mradlmaier]

Ja, bei obigen Ansatz wäre das so.
Alternativ, und natürlich eleganter wäre es, Android die 200 Bilder zur Laufzeit zu zuschneiden, dazu benötigst Du aber eben eine Bildbearbeitungsbibliothek.

Achja, es gäbe evtl. noch eine 3.te Alternative:
Du machst mit dem Framelayout zwei übereiander liegende Frames: eines mit dem Bild,
eines mit den 12 Teilflächen, oben drauf. Dieses Layout muss transparent sein. und wenn eine Teilfläche aufgedeckt wird, ersetzt Du das jeweilige Teilbild mit einem transparenten Bild. Dann müsste (theoretisch zumindest???) das darunterliegende FrameLayout sichtbar sein. Weiss allerdings nicht ob eine ImageView mit einem transparenten Bild tatsächlich transparent aufs darunter liegende Frame ist. (Glaube fast nicht, wenn nicht, kannst du die jeweilige ImageView programatisch "removen"). Das würde Dir zumindest die 200 Bilder zu zerschnipseln ersparen. Ist aber auch nicht direkt "trivial" zu programmieren.

Am einfachsten, aber am mühsamsten, ist meine erste Variante. Ich persönlich würde die 3. Variante wählen, aber da brauchst Du schon ein bisserl Erfahrung...

 

[erdalprinz]

okay, danke dir. Version 3 sagt mir im Moment mal am meisten zu. Denn die ganzen Bilder zu zerschneiden kostet doch sehr viel Zeit ;-)

ich werde mich in den nächsten tagen/wochen mal daran setzen und mich versuchen

 

[erdalprinz]

also ich habe jetzt mal etwas herumprobiert, bekomme es aber nicht hin, dass das Bild von den 12 Teilen verdeckt wird. kannst du mir vielleicht ein kleines Codebeispiel geben, damit ich vielleicht verstehe was ich falsch mache?

 

[wilco]

Ich würde gerne wissen, wie ich ein Bild in z.B. 12 gleich große Teile unterteilen kann, welche das Bild überdecken. Beim drücken auf das Bild soll dann ein zufällig ausgewählter Teil des Bildes aufgedeckt werden. Beim wiederholten drücken ein weiterer Teil usw.

Hier ist Methode vier:

Lade das Bild in eine Bitmap.
Definiere Dir ein Array mit 12 Rechtecken (Rect).
Setze die Dimensionen der Rechtecke so dass sie die Bildgröße abdecken. Wenn Du die Rechtecke in einer 3x4 Matrix anordnen möchtest geht das z.B. so:

Rect myRect = new Rect[12];
int breite = myBitmap.width()/3;
int hoehe = myBitmap.height()/4;

for (int i=0; i<3; i++)
   for (int k=0; k<4; k++)
       myRect[i+k*3]=new Rect(i*breite, k*hoehe, (i+1)*breite, (k+1)*hoehe);

Definiere Dir eine Klasse die von der Klasse View erbt. In dieser Klasse überschreibst Du die onDraw(Canvas) Methode.

In der onDraw Methode zeichnest Du dann für jedes der noch nicht aufgedeckten Rechtecke ein schwarzes Rechteck per canvas.drawRect(myRect, myPaint) Methode.

Die bereits aufgedeckten Rechtecke zeichnest Du per canvas.drawBitmap(myBitmap, myRect, myRect, myPaint) - diese Aktion zeichnet den passenden Ausschnitt der Source-Bitmap auf den passenden Teil Deiner view Bitmap.

 

[erdalprinz]

Erst mal wieder vielen Dank für die Hilfe.

Also ich habe mich jetzt nochmal mit Methode 3 beschäftigt und habe es nun immerhin so hinbekommen, dass mit einem OnTouchListener das oben liegende Bild (rote Fläche) in ein transparentes Bild wechselt und das eigentliche Bild darunter anzeigt.

Das ganze sieht dann so aus:

((ImageView)findViewById(R.id.imageView2)).setOnTouchListener(new View.OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {
                ((ImageView)findViewById(R.id.imageView2)).setImageResource(R.drawable.background_trans);
                return true;
            }
        });

Kann ich nun deine Methode 4 mit diesem Verfahren verbinden, um das Bild in die Teilflächen zu unterteilen? Geht das evtl. mit einem TableView mit 12 TableRows, wovon jede Zelle die Höhe und Breite aus dem von dir beschriebenen Array bekommt?

 

[Tom299]

Ich hab das gestern auch mal programmiert, ohne auf die Vorschläge hier zu schauen, und hab es letztlich wohl so gemacht wie wilco es vorgeschlagen hat.

Man braucht auch keine Bildbearbeitungsbibliothek, um ein Bild in X Teile aufzuteilen, da reichen ein paar Zeilen Code ;-)

Wenn man ein Bild splittet, kann man sich ja die Coords merken und die einzelnen Bilder kann man z.B. in eine ArrayList tun. Die Coords gelten dann sowohl für die Bildstücke wie auch für die Rechtecke, die das Bild "verdecken".

Dann läuft man durch die ArrayListe und malt für jedes Bild ein Rechteck (canvas.drawRect). Danach kann man ein zufälliges Bildstück aus der ArrayListe nehmen und es mit canvas.drawBitmap() malen (coords kennt man ja). Das gemalte Bitmap löscht man dann aus der ArrayListe. Nach dem Zeichnen daß invalidate() nicht vergessen ;-)

 

[erdalprinz]

Könntest du deinen Code evtl. hier posten, damit ich das Ganze besser nachvollziehen kann? Oder einen Link, wo ich mich besser in das Verfahren einlesen kann? Das wäre sehr nett.