Tạo mặt nạ (cắt) hình ảnh trong khung

83

Có một ứng dụng giao diện người dùng phong phú mà tôi muốn hiển thị hình ảnh có hình dạng phức tạp như thế này

nhập mô tả hình ảnh ở đây

Bây giờ những gì tôi muốn là cắt hình ảnh của tôi theo hình ảnh Mặt nạ, Thực tế hình ảnh đang đến động và có thể được nhập từ Máy ảnh hoặc Thư viện (hình vuông hoặc hình chữ nhật) và tôi muốn hình ảnh đó vừa với khung bố cục của mình như trên

Vì vậy, chỉ tự hỏi rằng làm thế nào để tôi đạt được điều này? Mọi ý tưởng / gợi ý đều được chào đón

Mặt nạ khung nền
nhập mô tả hình ảnh ở đây

nhập mô tả hình ảnh ở đây

Như thế này

android  image  bitmap  masking  porter-duff 
— Mohammed Azharuddin Shaikh
nguồn

Câu trả lời:

143

Cuối cùng đã có giải pháp khi thay đổi hình ảnh mặt nạ và sử dụng XfermodevớiBitmap

Mặt nạ

nhập mô tả hình ảnh ở đây

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

xem đầu ra

nhập mô tả hình ảnh ở đây

Nguồn có thể được tìm thấy tại đây

— Mohammed Azharuddin Shaikh
nguồn
1
xin chào @ hotveryspicy, cảm ơn mã ví dụ, nó đã giúp ích rất nhiều. Tôi đang phải đối mặt với một số vấn đề, một số gợi ý nhỏ sẽ đi đường dài cho tôi. Tôi muốn cắt bitmap theo một số hình đa giác đã vẽ. Bitmap của tôi cắt theo hình đa giác nhưng nội dung của bitmap đã cắt được lấy từ trên cùng bên trái tức là 0,0 của bitmap gốc. Và tôi muốn nội dung bên dưới nơi đa giác được vẽ.
— Dory
@Nidhi bạn có thể tạo bitmap được chia tỷ lệ cho giống nhau.
— Mohammed Azharuddin Shaikh,
@hotveryspicy cảm ơn bạn đã trả lời. Thực ra tôi muốn làm điều tương tự ở đây. stackoverflow.com/questions/15969028/… . Vấn đề của tôi là bitmap bị cắt là cắt từ trên cùng bên trái tức là 0,0. Không tạo thành đường dẫn mà tôi đã chỉ định. Tôi cũng đã đặt mã. Xin vui lòng hướng dẫn tôi nơi tôi đang làm sai.
— Dory
nhờ @hotveryspicy, cho bất cứ ai cần đến nó, tôi đã thực hiện một ngã ba đơn giản mà có thể giúp quy mô hình ảnh kích thước của mặt nạ: github.com/worker8/MaskImage/tree/master
— Tôi là một con rồng ếch
1
Để chia tỷ lệ mặt nạ cho vừa với hình ảnh, tôi sử dụng dòng này: Bitmap resize = Bitmap.createScaledBitmap (mask, original.getWidth (), original.getHeight (), true); Và việc sử dụng mCanvas.drawBitmap (original, 0, 0, null); mCanvas.drawBitmap (thay đổi kích thước, 0, 0, sơn);
— Miguel
5

Thậm chí còn dễ dàng hơn khi sử dụng thư viện Picasso và một Chuyển đổi tùy chỉnh:

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

Sau đó, chỉ cần xác định nó trong một dòng:

Picasso.with(context)
                    .load(imageUrl)
                    .transform(new MaskTransformation(context, _maskDrawableId))
                    .placeholder(R.drawable.drawableId)
                    .into(imageView);
— anthonymonori
nguồn
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
nguồn
0

Ví dụ này che phần tử con của anh ấy (Imageview) bằng mặt nạ "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"/>

kiểm tra liên kết git này

— Lalli
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.