Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting the reference of added image to the editor #280

Open
rohan-317 opened this issue Oct 18, 2020 · 5 comments
Open

Getting the reference of added image to the editor #280

rohan-317 opened this issue Oct 18, 2020 · 5 comments
Labels
question Further information is requested

Comments

@rohan-317
Copy link

suppose i add an image using PhotoEditor.addImage(bitmap) then , how to get the reference of the image(ImageView) that has been added to the editor, suppose, i want to resize the added image to the size of editor then how can i do that ? please provide me some way to do so ! Thank you!

@rohan-317
Copy link
Author

i think, if this method would return that View then, maybe that can be solved .

package: ja.burhanrashid52.photoeditor
Class: PhotoEditor
File: PhotoEditor.java

/**
* This will add image on {@link PhotoEditorView} which you drag,rotate and scale using pinch
* if {@link PhotoEditor.Builder#setPinchTextScalable(boolean)} enabled
*
* @param desiredImage bitmap image you want to add
*/
public void addImage(Bitmap desiredImage) {

    //return this imageRootView view and make method return type to View instead of void
    final View imageRootView = getLayout(ViewType.IMAGE);
    final ImageView imageView = imageRootView.findViewById(R.id.imgPhotoEditorImage);
    final FrameLayout frmBorder = imageRootView.findViewById(R.id.frmBorder);
    final ImageView imgClose = imageRootView.findViewById(R.id.imgPhotoEditorClose);

    imageView.setImageBitmap(desiredImage);

    MultiTouchListener multiTouchListener = getMultiTouchListener();
    multiTouchListener.setOnGestureControl(new MultiTouchListener.OnGestureControl() {
        @Override
        public void onClick() {
            boolean isBackgroundVisible = frmBorder.getTag() != null && (boolean) frmBorder.getTag();
            frmBorder.setBackgroundResource(isBackgroundVisible ? 0 : R.drawable.rounded_border_tv);
            imgClose.setVisibility(isBackgroundVisible ? View.GONE : View.VISIBLE);
            frmBorder.setTag(!isBackgroundVisible);
        }

        @Override
        public void onLongClick() {

        }
    });

    imageRootView.setOnTouchListener(multiTouchListener);

    addViewToParent(imageRootView, ViewType.IMAGE);

}

@rohan-317 rohan-317 reopened this Oct 18, 2020
@rohan-317
Copy link
Author

I just cloned the repo and tried to do the solution , and its working!, i think we should be able to customize the image we add, so please @burhanrashid52, i request you to update this function!

MainActivity.java

public class MainActivity extends AppCompatActivity {

private PhotoEditor mPhotoEditor;
private PhotoEditorView mPhotoEditorView;


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

    mPhotoEditorView = findViewById(R.id.editor);
    mPhotoEditor = new PhotoEditor.Builder(this, mPhotoEditorView)
            .setPinchTextScalable(true) // set flag to make text scalable when pinch
            //.setDefaultTextTypeface(mTextRobotoTf)
            //.setDefaultEmojiTypeface(mEmojiTypeFace)
            .build(); // build photo editor sdk

    Bitmap icon = BitmapFactory.decodeResource(this.getResources(),
            R.drawable.cap);
    View addedImage = mPhotoEditor.addImage(icon);
    addedImage.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT));
    FrameLayout.LayoutParams broder =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,FrameLayout.LayoutParams.MATCH_PARENT);
    broder.setMargins(0,0,0,0);
    FrameLayout layout = addedImage.findViewById(R.id.frmBorder);
    layout.setLayoutParams(broder);
    ImageView imageView = addedImage.findViewById(R.id.imgPhotoEditorImage);
    imageView.setLayoutParams(broder);

}

}

PhotoEditor.java

/**
* This will add image on {@link PhotoEditorView} which you drag,rotate and scale using pinch
* if {@link PhotoEditor.Builder#setPinchTextScalable(boolean)} enabled
*
* @param desiredImage bitmap image you want to add
*/

public View addImage(Bitmap desiredImage) {

    final View imageRootView = getLayout(ViewType.IMAGE);
    final ImageView imageView = imageRootView.findViewById(R.id.imgPhotoEditorImage);
    final FrameLayout frmBorder = imageRootView.findViewById(R.id.frmBorder);
    final ImageView imgClose = imageRootView.findViewById(R.id.imgPhotoEditorClose);

    imageView.setImageBitmap(desiredImage);

    MultiTouchListener multiTouchListener = getMultiTouchListener();
    multiTouchListener.setOnGestureControl(new MultiTouchListener.OnGestureControl() {
        @Override
        public void onClick() {
            boolean isBackgroundVisible = frmBorder.getTag() != null && (boolean) frmBorder.getTag();
            frmBorder.setBackgroundResource(isBackgroundVisible ? 0 : R.drawable.rounded_border_tv);
            imgClose.setVisibility(isBackgroundVisible ? View.GONE : View.VISIBLE);
            frmBorder.setTag(!isBackgroundVisible);
        }

        @Override
        public void onLongClick() {

        }
    });

    imageRootView.setOnTouchListener(multiTouchListener);

    addViewToParent(imageRootView, ViewType.IMAGE);

    return imageRootView;
}

@burhanrashid52
Copy link
Owner

It's good that it's working for you. But the problem I see is exposing internal view to the client. imageRootView is created internally and manage the touch listner, if we return that as a value then the client can break or override the library logic very easily.

@burhanrashid52 burhanrashid52 added the question Further information is requested label Oct 19, 2020
@rohan-317
Copy link
Author

rohan-317 commented Oct 19, 2020

Okay then, what if we update OnPhotoEditorListener and add parameter "addedView" of type View? could that break library logic?
or maybe Overload addImage Function and give custom parameters like, what should be the width & height for the imageView, and another parameter to set Margin of FrameLayout of ImageView and Framelayout Container (id = "frmBorder")?

public void addImage(Bitmap desiredImage){ /* logic /}
public void addImage(Bitmap desiredImage,int width,int height){ /
logic /}
public void addImage(Bitmap desiredImage,int width,int height,int frameMargin){ /
logic /}
public void addImage(Bitmap desiredImage,int width,int height,int ImageMargin){ /
logic /}
public void addImage(Bitmap desiredImage,int width,int height,int ImageMargin,int frameMargin){ /
logic */}

this wouldn't break library logic + we client can have customization to the image we add, what say @burhanrashid52 ?

@burhanrashid52
Copy link
Owner

burhanrashid52 commented Oct 19, 2020

So here are the pros and cons of each approach.

  1. addView(view: View) method allows for adding view directly.
    1.1 Pros:
    1.1.1 Plain and simple API.
    1.1.1 No configuration overhead on the library.
    1.1.2 Custom views support.
    1.2 Cons:
    1.2.1 We cannot rely on the view. Since it been passed by the client. It can be modified at any time.
    1.2.2 Touch listener and other gestures might not work in CustomView cases.

  2. addImage(bitmap:Bitmap,int width,int height...)
    2.1 Pros:
    2.1.1 It fixes the first cons of the above approach.
    2.1.2 More controller of the view we create internally.
    2.2 Cons:
    2.2.1 Bad API design: Number of parameters get increased based on the feature request (This can be avoided by creating a BitmapStyleBuilder similar to what we did in the TextStyleBuilder )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants
@burhanrashid52 @rohan-317 and others