Maskierungsbild (Zuschneiden) im Rahmen

83

Ich habe eine umfangreiche UI-Anwendung, in der ich Bilder mit einer komplexen Form wie dieser anzeigen möchte

Geben Sie hier die Bildbeschreibung ein

Jetzt möchte ich mein Bild gemäß Maskenbild zuschneiden. Das Bild wird tatsächlich dynamisch und kann aus der Kamera oder Galerie (quadratische oder rechteckige Form) importiert werden. Ich möchte, dass dieses Bild wie oben in meinen Layoutrahmen passt

Ich frage mich nur, wie ich das erreichen kann. Jede Idee / jeder Hinweis ist willkommen

Hintergrundrahmen
Geben Sie hier die Bildbeschreibung ein
Maske
Geben Sie hier die Bildbeschreibung ein

wie diese

android  image  bitmap  masking  porter-duff 
— Mohammed Azharuddin Shaikh
quelle

Antworten:

143

Endlich die Lösung beim Ändern des Maskenbildes und Verwenden von XfermodemitBitmap

Maske

Geben Sie hier die Bildbeschreibung ein

 ImageView mImageView= (ImageView)findViewById(R.id.imageview_id);
 Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.content_image);
 Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask);
 Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
 Canvas mCanvas = new Canvas(result);
 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
 mCanvas.drawBitmap(original, 0, 0, null);
 mCanvas.drawBitmap(mask, 0, 0, paint);
 paint.setXfermode(null);
 mImageView.setImageBitmap(result);
 mImageView.setScaleType(ScaleType.CENTER);
 mImageView.setBackgroundResource(R.drawable.background_frame);

siehe Ausgabe

Geben Sie hier die Bildbeschreibung ein

Quelle finden Sie hier

— Mohammed Azharuddin Shaikh
quelle
1
hallo @ hotveryspicy, danke zum beispiel code, es hat sehr geholfen. Ich stehe vor einem Problem, ein kleiner Hinweis wird für mich viel bewirken. Ich möchte die Bitmap in eine gezeichnete Polygonform schneiden. Meine Bitmap schneidet in Polygonform, aber der Inhalt der zugeschnittenen Bitmap wird von oben links übernommen, dh 0,0 der ursprünglichen Bitmap. Und ich möchte den Inhalt unten, wo das Polygon gezeichnet wird.
— Dory
@Nidhi Sie können eine skalierte Bitmap für dieselbe erstellen.
— Mohammed Azharuddin Shaikh
@hotveryspicy Danke für die Antwort. Eigentlich möchte ich das Gleiche tun, was hier angegeben ist. stackoverflow.com/questions/15969028/… . Mein Problem ist, dass die abgeschnittene Bitmap von oben links abgeschnitten wird, dh 0,0. Bilden Sie nicht den Pfad, den ich angegeben habe. Ich habe auch Code eingegeben. Bitte führe mich dahin, wo ich falsch liege.
— Dory
danke @hotveryspicy, für jeden, der es braucht, habe ich eine einfache Gabel gemacht, die helfen kann, das Bild auf die Größe der Maske zu skalieren: github.com/worker8/MaskImage/tree/master
— Ich bin ein
1
Um die Maske an das Bild anzupassen, verwende ich diese Zeile: Bitmap resized = Bitmap.createScaledBitmap (mask, original.getWidth (), original.getHeight (), true); Und die Verwendung der mCanvas.drawBitmap (original, 0, 0, null); mCanvas.drawBitmap (Größe geändert, 0, 0, Farbe);
— Miguel
5

Mit der Picasso-Bibliothek und einer benutzerdefinierten Transformation ist es noch einfacher:

MaskTransformation.java:

 * ORIGINAL:
 * Copyright (C) 2015 Wasabeef
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package me.monori.example.utilities;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;

import com.squareup.picasso.Transformation;

public class MaskTransformation implements Transformation {

    private static Paint mMaskingPaint = new Paint();
    private Context mContext;
    private int mMaskId;

    static {
        mMaskingPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    }

    /**
     * @param maskId If you change the mask file, please also rename the mask file, or Glide will get
     * the cache with the old mask. Because getId() return the same values if using the
     * same make file name. If you have a good idea please tell us, thanks.
     */
    public MaskTransformation(Context context, int maskId) {
        mContext = context.getApplicationContext();
        mMaskId = maskId;
    }

    @Override public Bitmap transform(Bitmap source) {
        int width = source.getWidth();
        int height = source.getHeight();

        Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

        Drawable mask = getMaskDrawable(mContext, mMaskId);

        Canvas canvas = new Canvas(result);
        mask.setBounds(0, 0, width, height);
        mask.draw(canvas);
        canvas.drawBitmap(source, 0, 0, mMaskingPaint);

        source.recycle();

        return result;
    }

    @Override public String key() {
        return "MaskTransformation(maskId=" + mContext.getResources().getResourceEntryName(mMaskId)
                + ")";
    }

    public Drawable getMaskDrawable(Context context, int maskId) {
        Drawable drawable = ContextCompat.getDrawable(context, maskId);

        if (drawable == null) {
            throw new IllegalArgumentException("maskId is invalid");
        }

        return drawable;
    }
}

Dann definieren Sie es einfach in einer Zeile:

Picasso.with(context)
                    .load(imageUrl)
                    .transform(new MaskTransformation(context, _maskDrawableId))
                    .placeholder(R.drawable.drawableId)
                    .into(imageView);
— anthonymonori
quelle
1 
     final ImageView mImageView = (ImageView) findViewById(R.id.image);
     mImageView.setBackgroundResource(R.drawable.user_outer_circle_icon);


     mImageView.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {


            if(b){
                 mImageView.setBackgroundResource(R.drawable.profil_circle);

                 Bitmap original = BitmapFactory.decodeResource(getResources(),R.drawable.doge);

                 Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.mask_white);

                 Bitmap mask1 = BitmapFactory.decodeResource(getResources(),R.drawable.pencil_bg);

                 original = Bitmap.createScaledBitmap(original, mask.getWidth(),mask.getHeight(), true);

                 Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),Config.ARGB_8888);
                 Canvas mCanvas = new Canvas(result);
                 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
                 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
                 mCanvas.drawBitmap(original, 0, 0, null);
                 mCanvas.drawBitmap(mask, 0, 0, paint);
                 mCanvas.drawBitmap(mask1, 0, 0, null);
                 Bitmap mask2 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_pencil);
                 mCanvas.drawBitmap(mask2, 0, 0, null);
                 mImageView.setImageBitmap(result);
                 mImageView.setScaleType(ScaleType.FIT_XY);

                 b=false;
             }else{
                 ImageView mImageView = (ImageView) findViewById(R.id.image);
                 Bitmap original = BitmapFactory.decodeResource(getResources(),
                 R.drawable.doge);

                 Bitmap mask = BitmapFactory.decodeResource(getResources(),
                 R.drawable.mask_white);

                 original = Bitmap.createScaledBitmap(original, mask.getWidth(),
                 mask.getHeight(), true);

                 Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),
                 Config.ARGB_8888);
                 Canvas mCanvas = new Canvas(result);
                 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
                 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
                 mCanvas.drawBitmap(original, 0, 0, null);
                 mCanvas.drawBitmap(mask, 0, 0, paint);
                 paint.setXfermode(null);
                 mImageView.setImageBitmap(result);
                 mImageView.setScaleType(ScaleType.FIT_XY);
                // mImageView.setBackgroundResource(R.drawable.user_outer_circle_icon);
                 b= true;


             }


        }
    });
— Prashant
quelle
0

In diesem Beispiel wird sein untergeordnetes Element (Bildansicht) mit der Maske "animation_mask" maskiert.

<com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
android:id="@+id/frm_mask_animated"
android:layout_width="100dp"
app:porterduffxfermode="DST_IN"
app:mask="@drawable/animation_mask"
android:layout_height="100dp">

<ImageView android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="centerCrop"
           android:src="@drawable/unicorn"/>

Überprüfen Sie diesen Git-Link

— Lalli
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.