在画布上加载图片并在图片上覆盖文字并保存

Question

I want to create an application which will simply load the selected the image to a canvas and the user will have freedon to overlay text on the image anywhere on the image. ie is after he have overlayed text on the image he should be able to move the text, edit the text. How can this be achieved. Is it that i have to load a frame layout and then on that i have to dynamically place text view to get the text overlay or anything else can be done. I want to achieve something like the picture given below When a "Add text" is clicked from action bar I want to add the text to the Picture loaded by user. Searched a lot but could not get any answers. I just want how to get this text on the image and move it anywhere on the picture. Also the final image that will be saved on the device will be just with the text overlayed on the image. the box appearing in picture should not be present in the image. All the experts out their please guide me.

Answer 1

You can add ImageView and EditText to FrameLayout, then EditText will overlay your image. To drag view you should set OnTouchListner:

     mEditText.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
    final int action = event.getAction();

    mLastTouchX = event.getRawX();
    mLastTouchY = event.getRawY();

    switch (action) {
    case MotionEvent.ACTION_DOWN: {
    RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) getLayoutParams();
    mDeltaX = mLastTouchX - lParams.leftMargin;
    mDeltaY = mLastTouchY - lParams.topMargin;

    break;
    }
    case MotionEvent.ACTION_MOVE: {
    mLastTouchX = event.getRawX();
    mLastTouchY = event.getRawY();

    final RelativeLayout.LayoutParams params = (LayoutParams) getLayoutParams();
    params.leftMargin = (int) (mLastTouchX - mDeltaX);
    params.topMargin = (int) (mLastTouchY - mDeltaY);
    setLayoutParams(params);

    break;
    }
    }
    invalidate();

    return true;
    }
});

To create final image you can draw on canvas your original image and text.

UPDATED: You can add view with addView:

final EditText et  = new EditText(getContext());
et.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
mFramLayout.addView(et);

Also it's possible to adjust position with margins.