Effacer bitmap pièces à l'aide de PorterDuff mode

J'essaie d'effacer des parties d'une image bitmap dans mon application Android en utilisant Porter-Duff Xfermodes.

J'ai un fond vert qui est superposé par un bleu bitmap. Quand je touche l'écran d'un "trou" dans la superposition bitmap est censé être créé en rendant le fond vert visible. Au lieu d'un trou mon code actuel produit un point noir.

Ci-dessous mon code. Toutes les idées, ce que je fais de mal ici?

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(new DrawView(this));
}

public class DrawView extends View implements OnTouchListener {

    private int x = 0;
    private int y = 0;

    Bitmap bitmap;
    Canvas bitmapCanvas;

    private final Paint paint = new Paint();
    private final Paint eraserPaint = new Paint();

    public DrawView(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);

        //Set background
        this.setBackgroundColor(Color.GREEN);

        //Set bitmap
        bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.RGB_565);
        bitmapCanvas = new Canvas();
        bitmapCanvas.setBitmap(bitmap);
        bitmapCanvas.drawColor(Color.BLUE);

        //Set eraser paint properties
        eraserPaint.setAlpha(0);
        eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        eraserPaint.setAntiAlias(true);
    }

    @Override
    public void onDraw(Canvas canvas) {
        bitmapCanvas.drawColor(Color.BLUE);
        bitmapCanvas.drawCircle(x, y, 10, eraserPaint);

        canvas.drawBitmap(bitmap, 0, 0, paint);
    }

    public boolean onTouch(View view, MotionEvent event) {
        x = (int) event.getX();
        y = (int) event.getY();

        invalidate();
        return true;
    }

}

OriginalL'auteur Philipp | 2010-08-12

  1. 6

    Première pensée, je ne suis pas sûr si le réglage de l'alpha à 0 sur votre effacer la peinture de l'objet est une bonne idée. Qui peut faire toute chose inefficace.

    Aussi, vous devez toujours utiliser Bitmap.Config.ARGB_8888 si vous avez à traiter avec des alphas.

    Si vous rencontrez des problèmes avec le PorterDuff choses, si, je vous suggère de simplifier votre démarche de ne faire que (temporairement). Qui vous aidera à affiner la partie qui ne fonctionne pas. Commentaire tout à voir avec le toucher et la vue des mises à jour.

    Ensuite, vous pouvez sélectionner la partie du dessin qui ne fonctionne pas bien. Configurer votre constructeur comme suit:

    DrawView()
{
    /* Create the background green bitmap */
    ...

    /* Create foreground transparent bitmap */
    ...

    /* Draw a blue circle on the foreground bitmap */
    ...

    /* Apply the foreground to the background bitmap
       using a PorterDuff method */
    ...
}

onDraw()
{
    /* Simply draw the background bitmap */
    ...
}

    Si vous définissez les choses comme ça, vous devriez être en mesure de dire comment votre PD méthode affecte le vert bitmap, et de changer les choses en conséquence.

    Merci beaucoup Josh! La création de l'image Bitmap à l'aide de Bitmap.Config.ARGB_8888 au lieu de Bitmap.Config.RGB_565 résolu le problème. Concernant efficaces: j'ai l'intention d'appliquer la couche alpha d'une peinture de mon chemin vers l'avant-plan bitmap comme prochaine étape. Quelle approche vous suggère plutôt d'utiliser Porter-Duff concernant l'exécution du dessin?
    1. Comme vous obtenez événements tactiles onTouch, utilisez drawPath de temps en temps pour dessiner un noir chemin d'accès à une image transparente. C'est votre gomme bitmap. Si vous n'êtes pas déjà le faire, les FingerPaint application de l'API de démos a quelques beaux exemples de code. 2. Dans onDraw, appliquer votre gomme à effacer, à l'image bitmap d'ORIGINE bleu bitmap avec le bon PorterDuff méthode. Cela permettra de réduire l'ensemble dans le bleu bitmap la forme de ce que vous avez effacé (le noir chemin) jusqu'à présent. 3. Toujours dans onDraw, mettre le vert bitmap à l'écran, suivi par le nouveau coupé bleu bitmap.
    Remarque que ci-dessus pourrait être coûteux chaque tirage cycle de regarder dans les régions de découpage à la limite de la zone que vous faites une mise à jour uniquement à ce que l'utilisateur a changé dans la gomme bitmap.
    Merci encore, Josh! Concernant limitées mises à jour d'écran et lisse les chemins, j'ai trouvé un assez bon tuto ici: corner.squareup.com/2010/07/smooth-signatures.html
    Haha, ouais, que la section "Chirurgicalement Invalider" est exactement ce dont je parlais. C'est un bon tutoriel, trop!

    OriginalL'auteur Josh

  2. 9

    Voici code de travail... peut aider quelqu'un

    public class ImageDemo extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new Panel(this));   
}
class Panel extends View {
private Bitmap  mBitmap;
private Canvas  mCanvas;
private Path    mPath;
private Paint   mPaint;
Bitmap bitmap;
Canvas pcanvas;
int x = 0;
int y =0;
int r =0;
public Panel(Context context) {
super(context);
Log.v("Panel", ">>>>>>");
setFocusable(true);
setBackgroundColor(Color.GREEN);
//setting paint 
mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setAntiAlias(true);
//getting image from resources
Resources r = this.getContext().getResources();
Bitmap bm = BitmapFactory.decodeResource(getResources(),  R.drawable.mickey);
//converting image bitmap into mutable bitmap  
bitmap =  bm.createBitmap(295, 260, Config.ARGB_8888);
pcanvas = new Canvas();
pcanvas.setBitmap(bitmap);    //drawXY will result on that Bitmap
pcanvas.drawBitmap(bm, 0, 0, null);           
}
@Override
protected void onDraw(Canvas canvas) {  
//draw a circle that is  erasing bitmap            
pcanvas.drawCircle(x, y, r, mPaint);
canvas.drawBitmap(bitmap, 0, 0,null);
super.onDraw(canvas);
}       
@Override
public boolean onTouchEvent(MotionEvent event) {        
//set parameter to draw circle on touch event
x = (int) event.getX();
y = (int) event.getY();
r =20;
//At last invalidate canvas
invalidate();
return true;
}
}
}
    merci, j'ai trouvé ce utile, vous pouvez convertir l'image comme ceci mais avec notre codage en dur de la taille. bitmap = bm.copy(Config.ARGB_8888, true);
    Merci, j'ai aussi trouvé cet article très utile. J'étais à la recherche de cette solution plus tôt l'année dernière.
    Notez que si vous voulez juste tirer un trou dans l'image, il suffit de définir la couleur d'arrière-plan de Couleur.TRANSPARENT au lieu de la Couleur.VERT. J'ai eu beaucoup de temps à rassembler code de travail de tous les demi-exemples, merci beaucoup pour poster un exemple complet 🙂

    OriginalL'auteur pawan

  3. 0

    Voici un autre avancement de votre solution ... Voir Démo exemple

    public class MainActivity extends Activity {
Bitmap bp;
Canvas bitmapCanvas;
DrawView drawImg;
LinearLayout ln1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ln1 = (LinearLayout) findViewById(R.id.ln1);
drawImg = new DrawView(this);
ln1.addView(drawImg);
}
public class DrawView extends View implements View.OnTouchListener {
private int x = 0;
private int y = 0;
Bitmap bitmap;
Path circlePath;
Paint circlePaint;
private final Paint paint = new Paint();
private final Paint eraserPaint = new Paint();
public DrawView(Context context){
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
//Set background
this.setBackgroundColor(Color.CYAN);
bp = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
//Set bitmap
bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas();
bitmapCanvas.setBitmap(bitmap);
bitmapCanvas.drawColor(Color.TRANSPARENT);
bitmapCanvas.drawBitmap(bp, 0, 0, null);
circlePath = new Path();
circlePaint = new Paint();
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.BLUE);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeJoin(Paint.Join.MITER);
circlePaint.setStrokeWidth(4f);
//Set eraser paint properties
eraserPaint.setAlpha(0);
eraserPaint.setStrokeJoin(Paint.Join.ROUND);
eraserPaint.setStrokeCap(Paint.Cap.ROUND);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
eraserPaint.setAntiAlias(true);
}
@Override
public void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, paint);
bitmapCanvas.drawCircle(x, y, 30, eraserPaint);
canvas.drawPath(circlePath, circlePaint);
}
public boolean onTouch(View view, MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
bitmapCanvas.drawCircle(x, y, 30, eraserPaint);
circlePath.reset();
circlePath.addCircle(x, y, 30, Path.Direction.CW);
int ac=event.getAction();
switch(ac){
case MotionEvent.ACTION_UP:
Toast.makeText(MainActivity.this, String.valueOf(x), Toast.LENGTH_SHORT).show();
circlePath.reset();
break;
}
invalidate();
return true;
}
}
}

    lire plus

    OriginalL'auteur Daniel Nyamasyo