如何在Android中创建Scratch卡?

时间:2012-01-17 09:58:56

标签: android

我需要为我在学校的最终项目创建一个“Scratch Card”应用程序,并且无法找到如何实现划痕事件的方法(如何创建背景图像并将灰色矩形放在上面,所以当我愿意划伤那些矩形,我会看到它们下面的图片)

实施必须在Android中,因为我还没有如何在Objective-C中开发。

我看到了Objective-C Implementation的引用,但是因为我不理解它所以没有用。

我的代码是:

public class FingerPaint extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        try {
            MyView myView = new MyView(this);
            myView.requestFocus();
            myView.PaintObjectInit();
            // setContentView(myView);

            LinearLayout upper = (LinearLayout) findViewById(R.id.LinearLayout01);
            upper.addView(myView);
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }

        // MyImageView myImageView = new MyImageView(this);
        // setContentView(myImageView);
    }
}



public class MyView extends View {

    private Paint mPaint;
    private Bitmap mBitmap;
    private Canvas mCanvas;
    private Path mPath;
    private Paint mBitmapPaint;

    public MyView(Context context) {
        super(context);
        this.mPaint = new Paint();
        mPath = new Path();
        mBitmapPaint = new Paint(Paint.DITHER_FLAG);
    }

    protected void PaintObjectInit() {
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        //mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        //mPaint.setColor(0xFFFF0000);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(12);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        try
        {


        //Bitmap bm1 = BitmapFactory.decodeResource(this.getResources(),R.drawable.scratch).copy(Bitmap.Config.ARGB_8888, true);;
        //Bitmap bm2 = BitmapFactory.decodeResource(this.getResources(),R.drawable.main).copy(Bitmap.Config.ARGB_8888, true);;

        //mBitmap = toTransparency(bm1, 0xFFAAAAAA, true, bm2);

        mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
        }
        catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawColor(0xFFAAAAAA);
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
        canvas.drawPath(mPath, mPaint);
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        // mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
        }
    }

    private void touch_up() {
        mPath.lineTo(mX, mY);
        // commit the path to our offscreen
        mCanvas.drawPath(mPath, mPaint);
        // kill this so we don't double draw
        // mPath.reset();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up();
            invalidate();
            break;
        }
        return true;
    }
}

请帮忙解决这个问题。

3 个答案:

答案 0 :(得分:11)

我最近遇到了这个问题,然后我为此创建了一个库,这样每个人都可以快速实现划痕视图,希望这可以帮助那些仍在寻找答案的人 https://github.com/winsontan520/Android-WScratchView

答案 1 :(得分:2)

我发现这个库非常有用。

https://github.com/sharish/ScratchView

非常容易整合

<com.cooltechworks.views.ScratchImageView
    android:id="@+id/sample_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:src="@drawable/img_sample2"
/>

enter image description here enter image description here

答案 2 :(得分:0)

你可以像这样制作“Scratch Card”应用程序。你需要按照下面的代码工作代码。你只需要理解并实现自己的逻辑。

public class MainActJava extends AppCompatActivity {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        setContentView(new MyView(this, bitmap));
    }

    public class MyView extends View implements View.OnTouchListener {

        private static final float TOUCH_TOLERANCE = 4;
        private Paint mPaint;
        private Bitmap oBitmap;
        private Bitmap holder;
        private Canvas mCanvas;
        private Path mPath;
        private Paint mBitmapPaint;
        private float mX, mY;

        public MyView(Context context) {
            super(context);
        }

        public MyView(Context context, Bitmap bitmap) {
            super(context);
            setOnTouchListener(this);
            this.oBitmap = bitmap;
            this.mPaint = new Paint();
            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);
            init();
        }

        protected void init() {
            mPaint.setAntiAlias(true);
            mPaint.setDither(true);
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeJoin(Paint.Join.ROUND);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
            mPaint.setStrokeWidth(35);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            holder = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(holder);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            onDrawing(canvas);
        }

        private void onDrawing(Canvas canvas) {
            mCanvas.drawColor(0xFFAAAAAA);
            mCanvas.drawPath(mPath, mPaint);
            canvas.drawBitmap(oBitmap, getWidth()/2, getHeight()/2, mBitmapPaint);
            canvas.drawBitmap(holder, 0, 0, mBitmapPaint);
        }

        private void touch_start(float x, float y) {
            mPath.moveTo(x, y);
            mX = x;
            mY = y;
        }

        private void touch_move(float x, float y) {
            float dx = Math.abs(x - mX);
            float dy = Math.abs(y - mY);
            if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
                mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
                mX = x;
                mY = y;
            }
        }

        private void touch_up() {
            mPath.lineTo(mX, mY);
            mCanvas.drawPath(mPath, mPaint);
        }


        @Override
        public boolean onTouch(View view, MotionEvent event) {
            float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    touch_start(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_MOVE:
                    touch_move(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    touch_up();
                    invalidate();
                    break;
            }
            return true;
        }
    }
}

<强>输出:

enter image description here