ফ্রেমটিতে মাস্কিং (ক্রপ) চিত্র


83

একটি সমৃদ্ধ ইউআই অ্যাপ্লিকেশন রয়েছে যাতে আমি এর মতো জটিল আকারের সাথে চিত্রটি দেখাতে চাই

এখানে চিত্র বর্ণনা লিখুন

এখন আমি যা চাই তা হল মাস্ক চিত্র অনুসারে আমার চিত্রটি ক্রপ করা, আসলে চিত্রটি গতিশীল আসছে এবং ক্যামেরা বা গ্যালারী (বর্গক্ষেত্র বা আয়তক্ষেত্রাকার আকৃতি) থেকে আমদানি করা যেতে পারে এবং আমি চাই যে চিত্রটি আমার লেআউট ফ্রেমে উপরের মতো ফিট হোক

তাই কেবল ভাবছি যে আমি কীভাবে এটি অর্জন করব? কোনও ধারণা / ইঙ্গিত স্বাগত

পটভূমি ফ্রেম
এখানে চিত্র বর্ণনা লিখুন
মাস্ক
এখানে চিত্র বর্ণনা লিখুন

এই মত

উত্তর:


143

অবশেষে মুখোশ চিত্র পরিবর্তন করার Xfermodeসাথে এবং এর ব্যবহার করার সময় সমাধানটি পেল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);

আউটপুট দেখুন

এখানে চিত্র বর্ণনা লিখুন

উত্স এখানে পাওয়া যাবে


4
হ্যালো @ হটওয়ারস্পাইসি, উদাহরণস্বরূপ কোডের জন্য ধন্যবাদ, এটি অনেক সাহায্য করেছিল। আমি কিছু সমস্যার মুখোমুখি হচ্ছি, কিছুটা সামান্য ইঙ্গিতটি আমার জন্য অনেক দূর এগিয়ে যাবে। আমি টানা কয়েকটি বহুভুজ আকারে বিটম্যাপটি কাটতে চাই। আমার বিটম্যাপটি বহুভুজ আকারে কাটছে তবে ক্রপযুক্ত বিটম্যাপের সামগ্রীটি উপরের বাম থেকে অর্থাৎ আসল বিটম্যাপের 0,0 থেকে নেওয়া হয়েছে। এবং আমি বহুভুজ আঁকা যেখানে নীচের লিখিত সামগ্রী চাই।
ডরি

@ নীধি আপনি একই জন্য স্কেলড বিটম্যাপ তৈরি করতে পারেন।
মোহাম্মদ আজহারউদ্দিন শাইখ

উত্তরের জন্য টুইটার আসলে আমি এখানে দেওয়া একই জিনিস করতে চাই। stackoverflow.com/questions/15969028/… । আমার সমস্যাটি ক্রপযুক্ত বিটম্যাপটি হ'ল উপরের বাম থেকে ক্রপ হয় অর্থাৎ 0,0। আমি যে পথটি নির্দিষ্ট করেছিলাম তা গঠন করবেন না। আমি কোডও রেখেছি। আমি যেখানে ভুল করছি দয়া করে আমাকে গাইড করুন।
ডুরি

ধন্যবাদ @ হটওয়ারস্পাইসি, যার যে কারও প্রয়োজন, আমি একটি সাধারণ কাঁটা তৈরি করেছি যা চিত্রটি মুখোশের আকারে স্কেল করতে সহায়তা করতে পারে: github.com/worker8/MkkImage/tree/master
আমি একটি ব্যাঙ ড্রাগন

4
চিত্রটি ফিট করার জন্য মাস্কটি স্কেল করতে, আমি এই লাইনটি ব্যবহার করছি: বিটম্যাপ পুনরায় আকারিত = বিটম্যাপ.createScaledBitmap (মুখোশ, original.getWidth (), original.getHeight (), সত্য); এবং ব্যবহার mCanvas.draw বিটম্যাপ (মূল, 0, 0, নাল); এম ক্যানভাস.ড্রেউ বিটম্যাপ (আকার পরিবর্তন, 0, 0, পেইন্ট);
মিগুয়েল

5

এটি পিকাসোর লাইব্রেরি এবং একটি কাস্টম রূপান্তর ব্যবহার করে আরও সহজ:

মাস্ক ট্রান্সফরমেশন.জভা:

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

তারপরে একটি লাইনে কেবল এটি সংজ্ঞায়িত করুন:

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

"অ্যানিমেশন_মাস্ক" মুখোশটি দিয়ে এই উদাহরণটি তার শিশু উপাদানকে (চিত্রদর্শন) মাস্ক করে ks

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

এই গিট লিঙ্কটি পরীক্ষা করুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.