フレーム内の画像のマスキング（トリミング）

83

このような複雑な形の画像を表示したいリッチなUIアプリケーションを持っている

ここに画像の説明を入力してください

今私が欲しいのはマスク画像に従って画像をトリミングすることです。実際には画像は動的になり、カメラまたはギャラリー（正方形または長方形）からインポートでき、その画像を上記のようにレイアウトフレームに収めたいです。

では、どうすればこれを達成できるのでしょうか。任意のアイデア/ヒントを歓迎します

背景
ここに画像の説明を入力してください
フレームマスク
ここに画像の説明を入力してください

同様に、この

android  image  bitmap  masking  porter-duff 
— モハメッド・アズハルディン・シェイク
ソース

回答:

143

マスク画像を変更し、Xfermodewithを使用しながら最終的に解決策を得ましたBitmap

マスク

ここに画像の説明を入力してください

 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);

出力を参照してください

ここに画像の説明を入力してください

ソースはここにあります

— モハメッド・アズハルディン・シェイク
ソース
1
こんにちは@hotveryspicy、たとえばコードのおかげで、それは大いに役立ちました。私はいくつかの問題に直面しています、いくつかの小さなヒントは私にとって大いに役立つでしょう。描かれた多角形にビットマップをカットしたい。私のビットマップは多角形にカットされますが、トリミングされたビットマップのコンテンツは左上、つまり元のビットマップの0,0から取得されます。そして、ポリゴンが描画される以下のコンテンツが必要です。
— ドーリー2013
@Nidhi同じためにスケーリングされたビットマップを作成できます。
— Mohammed Azharuddin Shaikh 2013
@hotveryspicy返信ありがとうございます。実はここと同じことをしたいです。stackoverflow.com/questions/15969028/…。私の問題は、ビットマップが左上からトリミングされている、つまり0,0であるということです。私が指定したパスを形成していません。コードも入れました。私が間違っているところを教えてください。
— ドーリー2013
ありがとう@hotveryspicy、それを必要とする人のために、私は画像をマスクのサイズに拡大縮小するのに役立つ簡単なフォークを作りました：github.com/worker8/MaskImage/tree/master
— 私はカエルのドラゴンです
1
画像に合わせてマスクを拡大縮小するには、次の行を使用します。ビットマップサイズ変更= Bitmap.createScaledBitmap（mask、original.getWidth（）、original.getHeight（）、true）; そして、mCanvas.drawBitmap（original、0、0、null）;を使用します。mCanvas.drawBitmap（サイズ変更、0、0、ペイント）;
— ミゲル
5

Picassoライブラリとカスタムトランスフォーメーションを使用するとさらに簡単になります。

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;
    }
}

次に、それを1行で定義するだけです。

Picasso.with(context)
                    .load(imageUrl)
                    .transform(new MaskTransformation(context, _maskDrawableId))
                    .placeholder(R.drawable.drawableId)
                    .into(imageView);
— アンソニーモノリ
ソース
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;


             }


        }
    });
— プラシャント
ソース
0

この例では、子要素（Imageview）をマスク「animation_mask」でマスクします。

<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"/>

このgitリンクを確認してください

— ラリ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.