Question

Here is my scenario:

I have one layout with a view where I can cal and get canvas on its onDraw() method. Now, upon an event, say onTouchEvent(), I would like to clip a portion of the canvas and display this portion into another view of another layout.

I found code snippet doing similar thing but they are based on the java.awt package which does not supported by the Android API, especially the core component like java.awt.Graphics2D

I would like to follow the similar algorithm using canvas instead of the Graphics2D in Android to draw its content into another canvas. How do we achieve this?

Basically, I would like to achieve the same result as done in the following code in java.awt:

protected void paint(Graphics2D g2) {
Ellipse2D ellipse = //create ellipse which is to be displayed in another surface
g2.fill(ellipse);  //how to achieve the same result in Android?
g2.draw(ellipse);  //how to achieve the same result in Android?
g2.clip(ellipse);  //how to achieve the same result in Android?
....
... 
//note: Afaik, in Android, the code like Drawable.draw(canvas, ....),
//will achieve result in the opposite way where the Drawable would be drawn into
//the Canvas whereas G2.fill(ellipse) would fill the ellipse with the G2's content
}

Answer 1

If I understood correctly what you need, you could try the code as follows.

This is how the activity’s xml layout file look like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.test.SourceImageView
        android:id="@+id/srcImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/landscape" /> <!-- landscape.png is the picture on resources -->

    <ImageView
        android:id="@+id/dstImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/srcImage"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

The activity’s source code:

public class MainActivity extends Activity implements SourceImageView.OnCropListener {

    private SourceImageView srcImageView;
    private ImageView       dstImageView;

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

        srcImageView = (SourceImageView) findViewById(R.id.srcImage);
        dstImageView = (ImageView) findViewById(R.id.dstImage);

        srcImageView.setOnCropListener(this);
    }

    @Override
    public void onCrop(Bitmap bitmap) {
        dstImageView.setImageBitmap(Bitmap.createScaledBitmap(bitmap, 50, 50, true));
    }
}

The custom view I called SourceImageView:

public class SourceImageView extends ImageView implements OnTouchListener {

    private float           x;
    private float           y;
    private Paint           paint;
    private Bitmap          bitmap;
    private OnCropListener  cropListener;

    public SourceImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOnTouchListener(this);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
        bitmap = ((BitmapDrawable) getDrawable()).getBitmap();
    }

    @Override
    protected void onDetachedFromWindow() {
        bitmap.recycle();
        super.onDetachedFromWindow();
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            x = event.getX();
            y = event.getY();

            if (cropListener != null) {
                if (x + 20 > bitmap.getWidth() || y + 20 > bitmap.getHeight() || (y - 20) < 0 || (x - 20) < 0) {
                    return true;
                }
                Bitmap b = Bitmap.createBitmap(bitmap, (int) x - 20, (int) y - 20, 40, 40);
                Bitmap overlay = Bitmap.createBitmap(40, 40, Bitmap.Config.ARGB_8888);
                Canvas c = new Canvas(overlay);

                c.clipRect(0, 0, b.getWidth(), b.getHeight());

                Path path = new Path();
                path.addCircle(20, 20, 20, Path.Direction.CW);
                c.clipPath(path, Op.INTERSECT);
                c.drawBitmap(b, 0, 0, null);

                cropListener.onCrop(overlay);

                Bitmap overlay2 = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
                Canvas canvas = new Canvas(overlay2);
                canvas.drawBitmap(bitmap, 0, 0, null);
                canvas.drawCircle(x, y, 20, paint);
                bitmap = overlay2;
                setImageBitmap(bitmap);
            }
        }
        return true;
    }

    public void setOnCropListener(OnCropListener cropListener) {
        this.cropListener = cropListener;
    }

    static interface OnCropListener {
        public void onCrop(Bitmap bitmap);
    }

}

Be careful when dealing with bitmaps, they can be an expensive source of memory leaks, specially if you are working with older versions of android. I haven’t checked for leaks in this code. Probably this can be improved (refactored, optimized).

if this isn’t what you want, I hope that helps giving you ideas and pointing you to the right direction.

==EDIT==

It may not be clear so I must say that I assumed as an example that the cropped part of the image is an area of a circle of 20 px radius.