Drawing Lines on Images in Phimpme

In the editing section of the Phimpme app, we want a feature which lets the user write something on the image in their own handwriting. The user can also select different colour palette available inside the app. We aligned this feature in our editor section as Phimpme Image app allows a user to use our custom camera with the large number of editing options (Enhancement, Transform, Applying Stickers, Applying filters and writing on images). In this post, I am explaining how I implemented the draw feature in Phimpme Android app.

Let’s get started

Step -1: Create bitmap of Image and canvas to draw

The first step is to create a bitmap of Image on which you want to draw lines. Now we need a canvas to draw and canvas requires bitmap to work. So in this step, we will create a bitmap and new canvas to draw the line.

BitmapFactory.Options bmOptions = new BitmapFactory.Options();

Bitmap bitmap =  BitmapFactory.decodeFile(ImagePath, bmOptions);

Canvas canvas = new Canvas(bitmap);

Once the canvas is initialized, we use paint class to draw on the canvas.

Step-2: Create Paint class to draw on canvas

In this step, we will create a new Paint class with some properties like colour, Stroke Width and Coordinate where we want to draw a line and it can be done by using the following code.

Paint paint = new Paint();

paint.setColor(Color.rgb(255, 153, 51));

paint.setStrokeWidth(10);

int startx = 50;

int starty = 90;

int endx = 150;

int endy = 360;

canvas.drawLine(startx, starty, , endy, paint);

The above code will result in a straight line on the canvas like the below screenshot.

Step-3: Add support to draw on touch dynamically

In step 2 we have added the feature to draw a straight line, but what if the user wants to draw the lines on canvas with on touch event. So to achieve this we have to apply onTouchListener and applying coordinates dynamically and it can be done by using the following code.

@Override

public boolean onTouchEvent(MotionEvent event) {

 boolean ret = super.onTouchEvent(event);

 float x = event.getX();

 float y = event.getY();

 switch (event.getAction()) {

     case MotionEvent.ACTION_DOWN:

         ret = true;

         last_x = x;

         last_y = y;

         break;

     case MotionEvent.ACTION_MOVE:

         ret = true;

         canvas.drawLine(last_x, last_y, x, y);

         last_x = x;

         last_y = y;

         this.postInvalidate();

         break;

     case MotionEvent.ACTION_CANCEL:

     case MotionEvent.ACTION_UP:

         ret = false;

         break;

 }

 return ret;

}

Now the above code will let you draw the lines dynamically. But, how? The answer is In on touch event, I am fetching coordinates of touch and applying it dynamically to a canvas. Now our feature is ready to draw the lines on canvas with finger touch.

Drawing line in Phimpme Editor

Step – 4: Adding eraser functionality

Till now we have added the draw on canvas functionality, but what if the user wants to erase particular area. So now we have to implement the eraser functionality. It is very simple now what we have to do again we have to draw, but we will set paint color to the transparent color. It will draw the transparent color on the existing line which results in the previous picture and it looks like we are erasing. It can be done by adding one line.

paint.setColor(eraser ? Color.TRANSPARENT : color);

Now we have done by drawing the lines on an image and erasing functionality.

Resources:

Continue ReadingDrawing Lines on Images in Phimpme

Adding Text on an Image in Phimpme Android

As Phimpme Android is an image app which provides own custom camera, editing, and sharing images on multiple platforms, so we decided to introduce a new feature, where the user can write text on images.

Using this feature, a user can write text on images and share on multiple  platforms like Facebook, twitter, wordPress, drupal, pinterest, etc. In this post, I am going to explain how I implemented this feature.

Writing Text on image in Phimpme Android

How I implemented Text on Image in Phimpme

First, create an imageview and apply the original image bitmap or load with any image library by providing the local path of the image.

imageView.setImageBackgroundResources(imagePath);

Once an image is loaded we will ask a user to enter text in editext and the text will be displayed above the image. The code for this is:

EditText inputBox = (EditText) layout.findViewById(R.id.editText);
String textString = inputBox.getText().toString();

Now we have textString variable that stores the text we wanted to display. To set this text we need to create a textview on the image, which can be done as follows:

TextView textView = new TextView(context);
textView.setText(textString);

We allow the user to drag the text over image to his/her desired location. This is done using setOnTouchListener() as follows

TextView.setOnTouchListener(new View.OnTouchListener() {
    float lastX = 0, lastY = 0;
 
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case (MotionEvent.ACTION_DOWN):
                lastX = event.getX();
                lastY = event.getY();
 
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = event.getX() - lastX;
                float dy = event.getY() - lastY;
                float finalX = v.getX() + dx;
                float finalY = v.getY() + dy + v.getHeight();               v.setX(finalX;              
              v.setY(finalY);
              break;
              }
              return true;
              }
        });

Thus, we have set the text according to the user’s desired location.

Problem I faced

The text doesn’t appear to move from the desired position, instead, the text moves from some offset value. To solve this I have used two variable finalX and finaly. Now I am calculating the distance from the point to corner and adding the extra offset value to finalX and finalY. So this is how I achieve perfect image on text feature with point accuracy in Phimpme-Android.

Resources:

 

Continue ReadingAdding Text on an Image in Phimpme Android