创建＆QUOT;阻力和明确的面具＆QUOT; Android上的图像视图 [英] Create a "drag and clear mask" on android image view

问题描述

让我解释那是什么意思：

Let me explain what is that mean:

首先出现的是二imageview的具有相同的大小，第一个是一个掩模，它是在第二个是一个照片重叠。

First there is two imageview with the same size, the first one is a mask and it is overlap on the second one which is a photo.

该pusdeo布局

<RelativeLayout>
<image view  (mask) match parent>
<image view (photo) match parent>
</RelativeLayout>

所以，当应用程序启动它是一个整体黑暗的一页。然后，用户开始在屏幕上拖动，它像扫出面具，展现面具背后的照片。样本的照片是这样的：

So, when the app start it is a whole dark page. The user then start drag on the screen , it like sweep out the mask and show the photo behind the mask. A sample photo is like this:

只着眼顶端图像上，这看起来，对照片上方的掩模，只有当在屏幕上用户拖动，它清洗掩模和显示照片的后面。如何实现这一目标，我需要使用cavans /其他图书馆？

Just focus on the top image, it looks like that , there is a mask on top of the photo, only when user drag on screen, it clean the mask and show the photo behind. How to achieve that, do I need using cavans / other library?

感谢您的帮助。

推荐答案

下面是一个code样品。最重要的部分是1）它使用了一个自定义视图重叠图像视图; 2）它使用实际的绘制（为了要求一个位图画布能够清除像素）; 3）绘画使用特殊的清除传输模式。

Here's a code sample. The important parts are 1) it uses a customized view that overlaps the image view; 2) it uses a bitmap canvas for the actual drawing (required in order to be able to clear pixels); and 3) the painting uses the special CLEAR transfer mode.

package com.example.drawingwithmask;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class DrawView extends View implements OnTouchListener {

    private Paint bmPaint = new Paint();
    private Paint drawPaint = new Paint();
    private Path path = new Path();
    private Canvas cv = null;
    private Bitmap bm = null;
    private boolean firstTimeThru = true;


    public DrawView(Context context) {
        super(context);
        init();
    }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    public void init() {
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setOnTouchListener(this);
}

    @Override
    public void onDraw(Canvas canvas) {
        // Set everything up the first time anything gets drawn:
        if (firstTimeThru) {
            firstTimeThru = false;

            // Just quickly fill the view with a black mask:
            canvas.drawColor(Color.BLACK);

            // Create a new bitmap and canvas and fill it with a black mask:
            bm = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Config.ARGB_8888);
            cv = new Canvas();
            cv.setBitmap(bm);
            cv.drawColor(Color.BLACK);

            // Specify that painting will be with fat strokes:
            drawPaint.setStyle(Paint.Style.STROKE);
            drawPaint.setStrokeWidth(canvas.getWidth() / 15);

            // Specify that painting will clear the pixels instead of paining new ones:
            drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        }

        cv.drawPath(path, drawPaint);
        canvas.drawBitmap(bm, 0,  0, bmPaint);

        super.onDraw(canvas);
    }

    public boolean onTouch(View view, MotionEvent event) {
        float xPos = event.getX();
        float yPos = event.getY();

        switch (event.getAction()) {

        // Set the starting position of a new line:
        case MotionEvent.ACTION_DOWN:
            path.moveTo(xPos, yPos);
            return true;

        // Draw a line to the ending position:
        case MotionEvent.ACTION_MOVE:
            path.lineTo(xPos, yPos);
            break;

        default:
            return false;
        }

        // Call onDraw() to redraw the whole view:
        invalidate();
        return true;}
}

activity_layout：

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/ic_launcher" />

<com.example.drawingwithmask.DrawView
    android:id="@+id/draw"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

包com.example.drawingwithmask;

package com.example.drawingwithmask;

进口android.app.Activity;
进口android.os.Bundle;

import android.app.Activity; import android.os.Bundle;

public class MainActivity extends Activity {
    DrawView drawView = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout);

        drawView = (DrawView) findViewById(R.id.draw);
    }
}

附录：

下面是如果mask清算一定的阈值已达到可预测的方法。我通过调用测试它 checkProgress（）从 MOTION_MOVE 事件情况。这可能不是最好的方式或甚至一个很好的方法，但是它至少在步骤^ 2（400 presented）像素检查的费用提供的估计。

Addendum:

Here's a method that can estimate if a certain threshold of mask clearing has been reached. I tested it by calling checkProgress() from the MOTION_MOVE event case. This might not be the best way or perhaps even a good way, but it does at least provide an estimate at the expense of STEPS^2 (400 as presented) pixel checks.

final int STEPS = 20;
final double THRESHOLD = 0.70;

private void checkProgress() {

    int sum = 0;
    for (int x = 0; x < bm.getWidth(); x += bm.getWidth() / STEPS)
        for (int y = 0; y < bm.getHeight(); y += bm.getHeight() / STEPS)
            if (bm.getPixel(x, y) != Color.BLACK)
                sum++;

    double progress = (double) sum / (STEPS * STEPS);
    Log.v(TAG, "Cleared: " + progress);

    if (progress >= THRESHOLD)
        Log.i(TAG, "Done!");
}

这篇关于创建＆QUOT;阻力和明确的面具＆QUOT; Android上的图像视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！