Understanding how actually drawRect or drawing coordinates work in Android

Question

I am trying to draw a rectangle over a canvas and I am facing troubles to understand the in-depth of rectangle draw of Android. I've read tutorials and every possible but I am stuck.

Here in the image , the red rectangle is my target.

Irrespective of any rectangle size I need to draw the red rectangle bit above the base and in the middle of the rectangle. The worst nightmare I am facing here is understanding the X,Y Width and Height coordinates.

Can anyone explain how that math works, sometime we go up , Y reaches to very small but same width coordinates are higher. And I am never able to justify red inner rectangle properly.In some screen it works well in some other it fails. The red rectangle sometimes come out of the parent rectangle.

Agenda is to understand how coordinates work and ensure the integrity of inner red rectangle

It'll be great to get an explanation based on an example. I am using-

void drawRect(float left, float top, float right, float bottom, Paint paint)

to drawing the rectangle

Solution 1

X runs horizontally, from left to right. Y runs vertically, from top to bottom. It's exactly the same as on your graphics. So (0/0) is at top left.

When you go "up" Y will of course get smaller, as it grows from top to bottom.

You have to pay attention to laying out elements like ListViews, these will give a partial (or new, you cannot tell) canvas to your views that are drawn. These views will have 0x0 at their own top/left position. If you need the absolute you have to subsequently call View.getLocationOnScreen() and calculate offsets yourself.

Solution 2

canvas.drawRect(left,top,right,bottom,paint);

In this

1. left: distance of the left side of rectangular from left side of canvas.

2. top:Distance of top side of rectangular from the top side of canvas

3. right:distance of the right side of rectangular from left side of canvas.
4. bottom: Distance of the bottom side of rectangle from top side of canvas.

Solution 3

This will make sense.

float left = 100, top = 100; // basically (X1, Y1)

float right = left + 100; // width (distance from X1 to X2)
float bottom = top + 100; // height (distance from Y1 to Y2)

Thus

RectF myRectum = new RectF(left, top, right, bottom);
canvas.drawRect(myRectum, myPaint);

Solution 4

Wish my note as below help you understand the relativity belong rect, canvas and view.

/**
 * Rect holds four integer coordinates for a rectangle.
 * The rectangle is represented by the coordinates of its 4 edges (left, top, right bottom).
 * These fields can be accessed directly. Use width() and height() to retrieve the rectangle's width and height.
 *
 * Note that the right and bottom coordinates are exclusive.
 * This means a Rect being drawn untransformed onto a Canvas will draw into the column and row described by its left and top coordinates
 * , but not those of its bottom and right.
 *
 * With regard to calling to Canvas#drawRect(left,top,right,bottom,paint)
 *
 * left: Distance of the left side of rectangle from left side of canvas.
 * top: Distance of top side of rectangle from the top side of canvas
 * right: Distance of the right side of rectangle from left side of canvas.
 * bottom: Distance of the bottom side of rectangle from top side of canvas.
 * __________________________________
 *|
 *|
 *|   __l_______________________r__
 *|  |         view group A        |
 *| t|  0______________________w   |
 *|  |  | **** view group B *** |  |
 *|  |  | **** canvas of B **** |  |
 *|  |  | ********************* |  |
 *|  |  | ********************* |  |
 *|  |  | ********************* |  |
 *|  |  | ***** __________ **** |  |
 *|  |  | *****|## rect ##|**** |  |
 *|  |  | *****|##########|**** |  |
 *|  |  | *****|##########|**** |  |
 *|  |  | *****|##########|**** |  |
 *|  |  | *****|##########|**** |  |
 *|  |  | ***** ---------- **** |  |
 *|  |  | ********************* |  |
 *| b|  h-----------------------   |
 *|  |                             |
 *|  |                             |
 *|   -----------------------------
 *|
 * -----------------------------------
 *
 * 1. l, t, r, b are coordinates of view group B (PastryChart) relative to view group A (parent of PastryChart).
 * 2. The size of canvas of B is same as the size of the view group B
 *    , which means canvas of B is a canvas which the view group B is rendered to.
 * 3. The coordinates of rect is relative to a canvas, here is the canvas of B
 *    , which means the coordinates of rect going to represent child of view group B are relative to the canvas of B.
 *    ex. for a rect holding left = 0, the position of its left is located on the same position of the left of view group B
 *    ex. for a rect holding right = w, the position of its right is located on the same position of the right of view group B
 *    ex. for a rect holding top = 0, the position of its top is located on the same position of the top of view group B
 *    ex. for a rect holding bottom = h, the position of its bottom is located on the same position of the bottom of view group B
 * 4. The rect is used to stored the child measurement computed in measure pass
 *    for forward positioning child view (PastryView) in the layout pass taken by parent view (PastryChart).
 * 5. All of them are in pixels (px)
 */

Solution 5

Here is my approach simple and easy

            int x = 100;  //position coordinate from left
            int y = 100;  //position coordinate from top
            int w = 100; //width of the rectangle
            int h = 100; //height of the rectangle
            drawRectangle(x, y, w, h, canvas, paint);

and here is my function

    public void drawRectangle(int left, int top, int right, int bottom, Canvas canvas, Paint paint) {
    right = left + right; // width is the distance from left to right
    bottom = top + bottom; // height is the distance from top to bottom
    canvas.drawRect(left, top, right, bottom, paint);
}

it works pretty well

View more solutions

Comments

[Ayaz Alifov]

I think 2 and 4 are incorrect. They need to be: 2. top: Distance of TOP side of rectangular from the top side of canvas 4. bottom: Distance of the BOTTOM side of rectangle from top side of canvas.

[Aniruddha]

meredrica : these values are in pixels?

[Aniruddha]

savan : are these values in pixels?

[Thiago Elias]

Simple and perfect explanation. Exactly what I needed to really understand this.

[DevOpsSauce]

I think that Rectangle variable name is the funniest thing I've ever seen on StackOverflow. XD

[bhavya joshi]

That's what i needed