Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
716 views
in Technique[技术] by (71.8m points)

canvas - How to unBlur square portion of Blurry image on touch android

What I want to do:

On mouse hover of Blurry image, it shows unblur same image in square shape like following image. (image is completely blur, on mouse hover unblur image shown in square shape)

What I have done:

I set blur image using following code (link) using PorterDuff.Mode. On touch of screen mouse pointer converted into square and image shows unblur.


Edit:

Problem:

Now picture is unblur but i cant find proper blur effect on blurry image and unblur image is also not clear, on touch is not working properly.

My Code:

using custom view and following methods i'm able to blur and unblur image but still there's not completely satisfied with output.

@Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(mTutorialColor);
        if (mCx >= 0 && mCy >= 0) {
            DisplayMetrics displayMetrics = new DisplayMetrics();
            ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
            int height = displayMetrics.heightPixels;
            int width = displayMetrics.widthPixels;
            // canvas.drawCircle(mCx, mCy, RADIUS, mBackgroundPaint);
            canvas.drawRect(mCx, mCy, mCx + width, mCy + 250, mBackgroundPaint);
        }

    }


private void init() {
        setWillNotDraw(false);
        setLayerType(LAYER_TYPE_HARDWARE, null);
        mBackgroundPaint = new Paint();
        mBackgroundPaint.setColor(getResources().getColor(android.R.color.transparent));
        mBackgroundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    }

Is there any other way to achieve this?

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You need to implement it differently.

You need two images (instead of one):

  1. Blurred one. Which will be always drawn as background (or in a view underneath). Read here how to blur the image.

  2. Normal one. This one should be drawn on top of blurred one using the square mask. Check this answer.

MORE DETAILS:

It can be done in the same way, how I explained in this answer, but with Mode.DST_IN Xfermode instead of PorterDuff.Mode.CLEAR.

Hope this will help you.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...