# CustomView uses canvas

Tram Ho

Take a look at the above view, with available `View` object, can we do the same? Or if you can, is it easy? With canvas we can completely handle the problem above. So in this article I will share what I learned about canvas in the easiest way to understand

The article content will include:

1. General introduction to canvas
2. Some basic methods
3. Find out more details through sample

`Canvas` is seen as a 2D surface (visualize like paper, board) that we can draw anything on it.

• Canvas provides methods to convert our drawing points into bitmaps.
• Instance of `Bitmap` class is linked to `View` instance and shows it in UI
• Paint objects contain type and color information about how to draw geometries (such as lines, rectangles, ovals, and paths), text, and bitmaps.

`Canvas` identifies shapes that you can draw on the screen, while `Paint` determines the color, style, font, etc. of each shape you draw.

When doing the drawing we will get the origin (0,0) in the upper left corner of the screen as shown below.

## 2. Some basic draw methods

### Geometric drawing

#### drawLine

It’s as simple as drawing a dash / vertical / diagonal line.

#### drawLines

If you want to draw more than 1 line, then you can use `drawLines` . You just need to provide information of the coordinate values.

#### drawPoint

The name is too clear. Draw 1 point =]]

#### drawPoints

Draw multiple points

#### drawRect

The most familiar is probably the `drawRect` draws the rectangle. We can pass coordinates or use the class `Rect` .

#### drawRoundRect

Round is round -> round, drawRoundRect is to draw rectangles with rounded corners based on the radiusX and radiusY properties to adjust the curvature of the corners.

#### drawCircle

`drawCircle` draws a circle with centerCoordinateX, centerCoordinateY is center coordinate, radius is radius

#### drawOval

Unlike drawing a circle, `drawOval` does not provide a radius, but is based on the proportions of the rectangle.

#### drawArc

`drawArc` uses the same mechanism as drawing an oval. `drawArc` uses `Rect` and has additional `startAngle` such as `startAngle` , `sweepAngle` and `useCenter` .

• For `startAngle` , calculate from the middle of the rectangle, and rotate clockwise
• For `sweepAngle` , adjective middle of the rectangle, and rotate counterclockwise

Both `startAngle` and `sweepAngle` use angle unit.

• `useCenter` is a boolean value that determines whether the arc uses center to draw or not?

For example:

`useCenter = false`

`useCenter = true`

#### drawPath

`drawPath` is a very useful method, often used in great drawing apps like paint.

### Draw text

Draw text more flexibly than using `TextView`

with:

• text is String data.
• coordinateX and coordinateY are used to coordinate text coordinates.
• paintText determines how you will draw it (size, color).

### Draw the image

#### drawBitmap

Required parameters are bitmap and destRect.

The bitmap can be extracted from resources.

destRect the rectangular area the canvas can draw to

## 3. Find out more details through sample

Going back to the original image, we are going to do a little demo for the paint panel. Use Java: v

The project structure is extremely simple, including:

• CanvasCustomView: Draw the canvas
• MainActivity: used to display CanvasCustomView

CanvasCustomView.class

MainActivity.class

activity_main.xml

Out of abundance. Run the app and draw. Thank you for taking the time to see the article.

See at:

Share the news now

Source : Viblo