Andriod plotting (Painting)-details on the use of canvas

Reprinted please indicate the source: http://blog.csdn.net/qinjuning

 

 

Since the use of canvas on the internet is comparatively abstract, maybe my logical thinking is not good, and it is always difficult to understand,

Especially for the use of the SAVE () and restore () methods. The content of this article is to summarize the use of canvas, including its two different uses.

The plot and some of its methods are described.

1BitmapCan be created from resources, files, or programs. The actual function is equivalent to the image storage space;

2
Canvas, Closely connected with bitmap. If bitmap is compared to the content, canvas is a platform that provides many methods to operate bitamp;

3
PaintClosely related to canvas. It is a paint tool on the "canvas" and is also used to set the style on the View control;

4
DrawableIf the first three are drawing in the memory (virtual), drawable is the interface (real) that shows the drawing results of the first three ).

Drawable has multiple child classes, such as bitmapdrawable, shapedrawable, and layerdrawable.

The above is taken from hellogv's "picture of Android getting started 14th"

 

Let's make a simple example:

Paint is the paint brush.

Bitmap is the canvas.

Canvas is a painter.

 

Therefore, a painter can draw any painting on the canvas through a paint brush.

 

Two Use Cases of canvas:

 

1. Get the canvas object from the custom view and the custom surfaceview.

Because the custom view and surfaceview have obtained the display area in the display interface, the canvas object only performs the interface layout in the display (Painting) area.

After the operation is completed, the canvas operation result is displayed.

 

The plotting method of the custom view is as follows:

// The canvas object exists, that is, the default display area @ overridepublic void draw (canvas) exists {// canvas drawing}

The surfaceview plotting method is as follows:

Surfaceview = new mysurfaceview (); // create a surface object surfaceholder = surfaceview. getholder (); // obtain the surfaceholder object canvas = surfaceholder. lockcanvas (); // obtain the canvas object // plot surfaceholder. unlockcanvasandpost (canvas); // release the canvas lock and display the view

 

2. In other cases, we need to create a canvas object through code and convert the drawing area to a drawable image after the painting is successful.

Or it can be displayed through setbitmap (Bitmap. The general steps are as follows:

// Create a bitmap object Bitmap bitmap = bitmap. createbitmap (200,100, config. argb_8888); // create a canvas object and draw canvas = new canvas (Bitmap); imageview imgview = new imageview (this ); // or other view controls that can be used to set a background image // set an image for imageview // convert a bitmap object to a drawable image; drawable = new bitmapdrawable (Bitmap); imgview. setbackgrounddrawable (drawable); or simply: imgview. setimagebitmap (Bitmap );

Both methods can display our drawing.
 

Canvas method analysis:

 

Clipxxx () method family

Note: In the current drawing area, crop (CLIP) A new drawing area, which is the current drawing area of the canvas object.

For example: cliprect (New rect (), the rectangle area is the current drawing area of the canvas.

Public intSave()

Note: The operations between the SAVE () and restore () methods do not affect the operations that have been drawn by canvas, such as roate.

The operations on the canvas (roate and translate) are temporary and do not exist after restore.

Public voidRestore()

Note: Restore the east and west resources saved before the Sava () method.

Drawxxx () method family

Note: draws a picture in the current drawing area with a certain coordinate value.

Note: The layers will be superimposed, that is, the layers that follow the painting will overwrite the layers of the previous painting.

 

Note the following methods:

Public voidDrawrect(Float left, float top, float right, float bottom, paint
Paint)

Note: Draw a rectangle. It must be noted that the parameters for drawing a rectangle are different from those in Java.

The parameters of this method are illustrated as follows:

 

Attention: the X and Y axes in the figure are incorrectly marked. I am too lazy to modify it again.

 

So,Height of the rectangle = bottom-Right

Width and width of the rectangle = right-left

 

PS: If the drawrect parameter is incorrect, for example, right <left, Android will not check the parameter or prompt the corresponding error message,

But it will draw a rectangle with a height or a small width, which may not be what you want.

Public voidTranslate(Float dx, float Dy)

Note: Translation (x, y) pixel units on the current Coordinate

If dx is <0, it is moved up along the X axis; DX> 0 is moved down along the X axis.

If dy is <0, it is moved up along the Y axis. Dy> 0 is moved down along the Y axis.

Public void
Rotate(Float degrees)

Note: rotate the image to a certain angle.

PS: from the above, the image is indeed rotated, but I cannot find the center of the rotation.

 

The demo is provided below. You can change some parameters and observe the effect on your own.

 

 

1. layout file main. xkl:Two imageviews are used to display bitmap drawing objects, and a custom View Drawing is used later.

 

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <view Android: layout_width = "fill_parent" Android: layout_height = "2dip" Android: Background = "#800080" Android: layout_margintop = "2dip"> </View> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text ="Show the canvas area and use of the clip method"/> <Imageview Android: Id = "@ + ID/imgclip" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_margintop = "10dip"/> <view Android: layout_width = "fill_parent" Android: layout_height = "2dip" Android: Background = "#800080" Android: layout_margintop = "2dip"> </View> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text ="Use of the SAVE and restore methods"/> <Imageview Android: Id = "@ + ID/imgsave" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_margintop = "10dip"/> <view Android: layout_width = "fill_parent" Android: layout_height = "2dip" Android: Background = "#800080" Android: layout_margintop = "2dip"> </View> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text ="Custom view, get a canvas object and drawing Area"/> <COM. qin. canvas. myview Android: Id = "@ + ID/myview" Android: layout_width = "fill_parent" Android: layout_height = "200px"/> </linearlayout>

2. Custom view, myview. Java,

Import android. content. context; import android. graphics. bitmap; import android. graphics. bitmapfactory; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. typeface; import android. graphics. bitmap. config; import android. util. attributeset; import android. view. view; public class myview extends view {private paint = new paint (); Public myview (Context) {super (context); // todo auto-generated constructor stub} public myview (context, attributeset attrs) {super (context, attrs );} // The canvas object exists, that is, the default display area @ overridepublic void draw (canvas) {// todo auto-generated method stubsuper. draw (canvas); // bold paint. settypeface (typeface. defaultfromstyle (typeface. bold); paint. setcolor (color. blue); canvas. drawtext ("Custom view, canvas object already exists. ", 30, 40, paint); canvas. drawrect (10, 10, 30, 30, paint); // converts an icon image to a bitmap object bitmap iconbit = bitmapfactory. decoderesource (getresources (), R. drawable. icon); canvas. drawbitmap (iconbit, 40, 40, paint );}}

3. Main project file mainactivity. Java

 

Public class mainactivity extends activity {// paint brush object paintprivate paint = new paint (); // remember to set the color for paint; otherwise, private imageview imgclip will not be displayed; // The plotting area and clip method private imageview imgsave; // save method and restore/** called when the activity is first created. * // @ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); imgclip = (imagev Iew) findviewbyid (R. id. imgclip); imgsave = (imageview) findviewbyid (R. id. imgsave); clip_drawcanvas (); // you need to create a canvas object in the case of the drawing area and the clip method save_drawcanvas (); // save method and restore, then, after the bitmap operation is completed on this object, the bitmap has the following two operations. // 1. Bitmap needs to be converted to drawable object drawable = new bitmapdrawable (Bitmap); // 2. Direct setimagebitmap (Bitmap) Private void clip_drawcanvas () {// convert the icon image to the bitmap object bitmap iconbit = bitmapfactory. decoderesource (getresources (), R. drawable. icon); // create a bitmap object Bitmap bitmap = bitmap. createbitmap (200,150, config. argb_8888); canvas = new canvas (Bitmap); // set the color to display the canvas in the drawing area. drawcolor (color. red); paint. setcolor (color. black); canvas. drawtext ("original drawing area-red part", 60, 50, paint); // draw a bitmap object canvas. drawbitmap (iconbit, 20, 20, paint); // crops an area. The current operation object is rect cropped area rect = new rect (180,120 ); // The current drawing area is the area cropped by rect, rather than the bitmap canvas that we previously assigned. cliprect (rect); canvas. drawcolor (color. yellow); // set the color to display the paint area. setcolor (color. black); canvas. drawtext ("Crop clip and draw area-yellow part", 10,100, paint); // converts a bitmap object to a drawable image resource // drawable = new bitmapdrawable (Bitmap ); // IMG. setbackgrounddrawable (drawable); // display, same as imgclip. setimagebitmap (Bitmap);} private void save_drawcanvas () {// convert the icon image to bitmap object bitmap iconbit = bitmapfactory. decoderesource (getresources (), R. drawable. icon); // create a bitmap object Bitmap bitmap = bitmap. createbitmap (200,100, config. argb_8888); canvas = new canvas (Bitmap); paint. setcolor (color. green); paint. settextsize (16); // set the font size canvas. drawrect (10, 10, 50, 8, paint); canvas. drawtext ("I have not rotated", 50, 10, paint); // Save the operations before the canvas, in Sava () operations between and restore do not affect canvas operations before canvas. save (); // rotate the canvas 30 degrees clockwise. rotate (30); canvas. drawcolor (color. red); canvas. drawbitmap (iconbit, 20, 20, paint); canvas. drawrect (50, 10, 80, 50, paint); // canvas. translate (20, 20); canvas. drawtext ("I'm rotating", 115,20, paint); // restore the attributes before save () and convert the roate (), translate () after the SAVE () method () and the clipxxx () method to clear the canvas. restore (); // translation (20, 20) pixels // canvas. translate (20, 20); canvas. drawrect (80, 10,110, 30, paint); canvas. drawtext ("I have not rotated", 115,20, paint); // converts a bitmap object to a drawable image asset // sets an image for the imageview // imgsave. setimagebitmap (Bitmap); drawable = new bitmapdrawable (Bitmap); imgsave. setbackgrounddrawable (drawable );}}

In general, canvas is still quite difficult to understand. In particular, it is a headache for you to write the corresponding code on your own.

Understanding thoroughly makes some real gains.