Σβηστρα αγγιζοντας την οθονη του android κινητου.Πώς;

xarda · 24 Απριλίου 2013

Θελω να φταξω μια απλη εφαρμογη οπου αγγιζοντας την οθονη του android κινητου να εξαφανζονται τα συγκεκριμένα Pxels που αγγιζω και να εμφανιζεται η "κατω" εικονα.Δηλαδη εχω δυο εικονες και αγγιζοντας την "πανω" να σβηνετε και να εμφανιζετε η "κατω".Κατι σαν σβηστρα ας πουμε.Ποιες βιβλιοθηκες πρεπει να χρησιμοποιησω και ποιες κλασεις;Μιλαω για android + Libgdx.

Ακριβως αυτο δλδ

theodoros8 · 24 Απριλίου 2013

Χωρις να το εχω ψαξει και να ειμαι γκουρου του android νομιζω πως αυτο "χρωματιζει" τα pixels του canvas με "διαφανες" χρωμα.

Canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)

αρα λεω εγω αν εχεις απο κατω την δευτερη σου φωτο,τοτε αυτη θα αρχισει να φαινεται σιγα σιγα.

Μην το παρεις σαν 100% απαντηση αλλα σαν αρχη.

nilosgr · 24 Απριλίου 2013

Σ ένα relativeLayout βάζεις πρώτα την κρυμμένη εικόνα και μετά την "από πάνω".

Κανείς override τη μέθοδο onTouch() της Activity

Και έχοντας πρόσβαση στην κλάση Canvas απ το Imageview της από πάνω εικόνας, κανείς το εφέ με το "σβήσιμο" με παρόμοιο τρόπο που είπε ο φίλος πιο πάνω.

Με libgdx δεν έχω ασχοληθεί, οπότε δεν ξέρω αν υπάρχει άλλος τρόπος, πιο εύκολος, χρησιμοποιώντας το API του

Directx · 24 Απριλίου 2013

Χμ.. θα μπορούσες να κάνεις κάτι τέτοιο επίσης (*δίχως Libgdx) θεωρώντας ότι έχουμε δυο BITMAP, το κρυφό / αόρατο (bmpBack) και το φανερό / ορατό (bmpFront), κάθε φορά που χρήστης μετακινεί το δάκτυλο του στην οθόνη εσύ αντιγράφεις (blit) το περιεχόμενο (σε μια ακτίνα τύπου Rect) που έχει το bmpBack στο σημείο της μετακίνησης στο σημείο του bmpFront οπότε ο χρήστης αντικαθιστά το bmpFront με τα περιεχόμενα του bmpBack.

* Η λογική είναι κοινή οπότε ίσως φανεί χρήσιμη..

Ακολουθεί γρήγορα γραμμένος κώδικας σε Android 2.2 SDK Emulator:

/*
 * "Overlay" erase effect, xdir.
 *  tested under Android 2.2 SDK
 */
package com.xdir.overlay;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.os.Bundle;
import android.util.Pair;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class OverlayActivity extends Activity {
	
	Bitmap bmpBack,
	  	   bmpFront;
	Canvas canFront;
	Paint  myPaint;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        
        // Switch to full screen mode..
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
        		WindowManager.LayoutParams.FLAG_FULLSCREEN); 
        setContentView(R.layout.main);
        
        /* Load back and front Bitmaps and their Canvas */
        Pair<Bitmap, Canvas> prBitCan;
        
        prBitCan = loadBitmap(R.drawable.back);
        bmpBack = prBitCan.first;
        
        prBitCan = loadBitmap(R.drawable.front);
        bmpFront = prBitCan.first;        
        canFront = prBitCan.second;
                                
        /* Prepare Canvas Paint class */
        myPaint = new Paint();
                        
        /* Setup ImageView control */
        final ImageView imgView = (ImageView)findViewById(R.id.imageView1);
        imgView.setImageBitmap(bmpFront);
        
        imgView.setOnTouchListener(new OnTouchListener() {			
			@Override
			public boolean onTouch(View v, MotionEvent event) 
			{
				eraseFront(event, myPaint);
				
				v.invalidate();
								
				return true;
			}
		});
    }
    
    // Return "Res" bitmap as mutable Bitmap & Canvas
    private Pair<Bitmap, Canvas> loadBitmap(final int Res)
    {
    	final Bitmap bmpImmutable = BitmapFactory.decodeResource(getResources(), Res),
    				 bmpMutable  = Bitmap.createBitmap(bmpImmutable.getWidth(), 
    						 bmpImmutable.getHeight(), Bitmap.Config.ARGB_8888);
    	
    	final Canvas canvas = new Canvas(bmpMutable);
    	canvas.drawBitmap(bmpImmutable, 0f, 0f, new Paint());
    	canvas.setDensity(Bitmap.DENSITY_NONE);
    	
    	return Pair.create(bmpMutable, canvas);
    }    
    
    private void eraseFront(final MotionEvent event, final Paint pnt)
    {
    	// Centre axes
    	int X = (int)event.getRawX() - 25,
    		Y = (int)event.getRawY() - 25;
    	
    	// Copy bmpBack to bmpFront 
    	canFront.drawBitmap(bmpBack, new Rect(X, Y, X + 50, Y + 50), new Rect(X, Y,
    			X + 50, Y + 50), pnt);     	
    }
    
}

Βίντεο..

http://www.youtube.com/watch?v=VKkhBoV8Fzk&feature=youtu.be

παπι · 24 Απριλίου 2013

Δεν εχει texture brush;

Directx · 24 Απριλίου 2013

Δεν εχει texture brush;

Χμ.. έχει BitmapShader οπότε μπορεί να γίνει κάτι σαν και αυτό δίχως ανάγκη χρήσης σχήματος Rectangle.. (βρε τι *μαθαίνω

)

* Το documentation της πλατφόρμας δεν συγκρίνεται με αυτό του WinAPI .. :-/

/*
 * "Overlay" erase effect using BitmapShader & drawCircle, xdir.
 *  tested under Android 2.2 SDK
 */
package com.xdir.overlay;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.Shader.TileMode;
import android.os.Bundle;
import android.util.Pair;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class OverlayActivity extends Activity {
	
	Bitmap bmpBack,
	  	   bmpFront;
	Canvas canFront;
	Paint  myPaint;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        
        // Switch to full screen mode..
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
        		WindowManager.LayoutParams.FLAG_FULLSCREEN); 
        setContentView(R.layout.main);
        
        /* Load back and front Bitmaps and their Canvas */
        Pair<Bitmap, Canvas> prBitCan;
        
        prBitCan = loadBitmap(R.drawable.back);
        bmpBack = prBitCan.first;
        
        prBitCan = loadBitmap(R.drawable.front);
        bmpFront = prBitCan.first;        
        canFront = prBitCan.second;
        
        /* Prepare Canvas Paint class & BitmapShader */
        myPaint = new Paint();
        myPaint.setShader(new BitmapShader(bmpBack, 
        		Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
                        
        /* Setup ImageView control */
        final ImageView imgView = (ImageView)findViewById(R.id.imageView1);
        imgView.setImageBitmap(bmpFront);
        
        imgView.setOnTouchListener(new OnTouchListener() {			
			@Override
			public boolean onTouch(View v, MotionEvent event) 
			{
				eraseFront(event, myPaint);
				
				v.invalidate();
								
				return true;
			}
		});
    }
    
    // Return "Res" bitmap as mutable Bitmap & Canvas
    private Pair<Bitmap, Canvas> loadBitmap(final int Res)
    {
    	final Bitmap bmpImmutable = BitmapFactory.decodeResource(getResources(), Res),
    				 bmpMutable  = Bitmap.createBitmap(bmpImmutable.getWidth(), 
    						 bmpImmutable.getHeight(), Bitmap.Config.ARGB_8888);
    	
    	final Canvas canvas = new Canvas(bmpMutable);
    	canvas.drawBitmap(bmpImmutable, 0f, 0f, new Paint());
    	canvas.setDensity(Bitmap.DENSITY_NONE);
    	
    	return Pair.create(bmpMutable, canvas);
    }    
    
    private void eraseFront(final MotionEvent event, final Paint pnt)
    {
    	int X = (int)event.getRawX(),
    		Y = (int)event.getRawY();
    	   
    	// Copy bmpBack to bmpFront using BitmapShader within a Circle object!    	
    	canFront.drawCircle(X, Y, 35, pnt);
    }
    
}

Βίντεο..

http://www.youtube.com/watch?v=c4aFYYXVG24

..και ο ίδιος κώδικας τροποποιημένος ώστε να σχεδιάζει το bmpBack ως συνεχόμενη γραμμή (την φιλοσοφία αυτής της σχεδίασης την είχαμε συζητήσει παλαιότερα εδώ)..

/*
 * "Overlay" erase effect using drawLine & BitmapShader, xdir.
 *  tested under Android 2.2 SDK
 */
package com.xdir.overlay;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.Shader;
import android.graphics.Shader.TileMode;
import android.os.Bundle;
import android.util.Pair;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class OverlayActivity extends Activity {
	
	Bitmap bmpBack,
	  	   bmpFront;
	Canvas canFront;
	Paint  myPaint;
	
	Point lastPos = new Point(-1, -1);
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        
        // Switch to full screen mode..
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
        		WindowManager.LayoutParams.FLAG_FULLSCREEN); 
        setContentView(R.layout.main);
        
        /* Load back and front Bitmaps and their Canvas */
        Pair<Bitmap, Canvas> prBitCan;
        
        prBitCan = loadBitmap(R.drawable.back);
        bmpBack = prBitCan.first;
        
        prBitCan = loadBitmap(R.drawable.front);
        bmpFront = prBitCan.first;        
        canFront = prBitCan.second;
        
        /* Prepare Canvas Paint class & BitmapShader */
        myPaint = new Paint();
        myPaint.setShader(new BitmapShader(bmpBack, 
        		Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        myPaint.setStrokeWidth(20);
        myPaint.setAntiAlias(true); // Smooth drawing..
                        
        /* Setup ImageView control */
        final ImageView imgView = (ImageView)findViewById(R.id.imageView1);
        imgView.setImageBitmap(bmpFront);
        
        imgView.setOnTouchListener(new OnTouchListener() {			
			@Override
			public boolean onTouch(View v, MotionEvent event) 
			{
				eraseFront(event, myPaint);
				
				v.invalidate();
								
				return true;
			}
		});
    }
    
    // Return "Res" bitmap as mutable Bitmap & Canvas
    private Pair<Bitmap, Canvas> loadBitmap(final int Res)
    {
    	final Bitmap bmpImmutable = BitmapFactory.decodeResource(getResources(), Res),
    				 bmpMutable  = Bitmap.createBitmap(bmpImmutable.getWidth(), 
    						 bmpImmutable.getHeight(), Bitmap.Config.ARGB_8888);
    	
    	final Canvas canvas = new Canvas(bmpMutable);
    	canvas.drawBitmap(bmpImmutable, 0f, 0f, new Paint());
    	canvas.setDensity(Bitmap.DENSITY_NONE);
    	
    	return Pair.create(bmpMutable, canvas);
    }    
    
    private void eraseFront(final MotionEvent event, final Paint pnt)
    {
    	int X = (int)event.getRawX(),
    		Y = (int)event.getRawY();
    	
    	// Copy bmpBack to bmpFront using BitmapShader with a Line shape (for contiguous
    	//  drawing)
    	if((lastPos.x == lastPos.y && lastPos.x == -1))    			
    	{
    		lastPos.x = X;
    		lastPos.y = Y;
    	}
    	
    	if(event.getAction() == MotionEvent.ACTION_UP)
    	{
    		lastPos.x = -1;
    		lastPos.y = -1;
    	}
    	else
    	{    	
    		canFront.drawLine(lastPos.x, lastPos.y, X, Y, pnt);    	
    		lastPos.x = X;
    		lastPos.y = Y;
    	}
    }
    
}

Βίντεο..

http://www.youtube.com/watch?v=iSSYlhNCAAY

Καλή συνέχεια!! Επεξ/σία 24 Απριλίου 2013 από Directx

marsel · 24 Απριλίου 2013

Θελω να φταξω μια απλη εφαρμογη οπου αγγιζοντας την οθονη του android κινητου να εξαφανζονται τα συγκεκριμένα Pxels που αγγιζω και να εμφανιζεται η "κατω" εικονα.Δηλαδη εχω δυο εικονες και αγγιζοντας την "πανω" να σβηνετε και να εμφανιζετε η "κατω".Κατι σαν σβηστρα ας πουμε.Ποιες βιβλιοθηκες πρεπει να χρησιμοποιησω και ποιες κλασεις;Μιλαω για android + Libgdx.

Ακριβως αυτο δλδ

Λοιπον αυτό που θες να κανείς είναι λίγο περιλοκο. Για να ζωγραφίσεις οτιδήποτε στο android έχεις την κλάση view. Θα φτιαξεις μια καινούρια κλάση η οποία θα κληρονομήσει την view και θα κανεις implement το interface ontouchlistener. Στην ondraw ζωγραφίσεις με διάφορες συναρτήσεις τύπου drawPolygon, drawLine κλπ. Τα σημεία τα παίρνεις απο τον listener, ωστόσο πρέπει να ορίσεις ενα μοντέλο για να αποθηκευσεις τα σημεία. Αφού θες να σβήσει ζωγράφισε με color.invisible ή όπως αλλιώς λέγεται.

Συνήθως η ζωγραφικη πρεπει να γίνεται σε ενα background thread, νομιζω όμως οτι αυτό θα είναι το επόμενο πρόβλημα σου.

Καλή τύχη.

Σύνδεση

Σβηστρα αγγιζοντας την οθονη του android κινητου.Πώς;

Προτεινόμενες αναρτήσεις

xarda

theodoros8

nilosgr

Directx

παπι

Directx

marsel

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση