"Android" 21.2 Canvas and paint

Last Update:2016-03-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Category: C #, Android, VS2015;Date created: 2016-03-19 I. Introduction to Canvas objectsThe canvas (canvas Object) is another graphic-image-drawing technique that is very similar to traditional frameworks like System.Drawing or iOS core graphics, which provides the maximum control for creating 2D graphics that can be used to solve situations where artboard resources are difficult to handle. For example, draw a custom slider Control's appearance, and so On.Canvas can be understood as a piece of memory that the system provides to us (but in fact it is just a set of drawing apis, the real memory is the bitmap below), and it provides a whole range of methods for manipulating this memory area, all of which are drawing Apis. That is to say, in this way we have been able to draw a stroke or use graphic to plot what we need, to draw what is to show what is controlled by Ourselves.1. Canvas APIAlthough the artboard (drawables) is powerful but has its limitations, some complex features cannot be implemented with it. For example, apply a filter to a picture taken by a camera on your device for red-eye effects, and so On. To implement these features, you can use the canvas API to fine-grained control over them so that you can selectively change the colors in a particular part of a picture.The Canvas API draws 2D graphics very much like a painter applying different colors of paint to different parts of the Model. or, each drawing operation on a canvas overrides part of the underlying bitmap, overwriting if it overlaps the part that was originally DRAWN.2. Get the Canvas objectThere are two ways of getting a canvas object.(1) 1th WayDefine the bitmap object, and then instantiate a canvas object. For example:Bitmap Bitmap = Bitmap.createbitmap (+, Bitmap.Config.Argb8888);Canvas canvas = new Canvas (b);(2) 2nd WayGets a canvas object by overriding the OnDraw () callback method of the view class.3. Manipulating Canvas objectsOnce you have the canvas object, you can manipulate it, for example:L Canvas.drawpaint (paint P) – fills the entire bitmap cloth with the specified paint Object.L Canvas.drawpath (path path, paint Paint) – Draws the specified geometry shape with the specified paint Object.L canvas.drawtext (String text, float x, float y, paint paint) – draws text at the (x, y) coordinates of the canvas with the specified paint object, such as specifying colors with a paint object. Ii. Common Properties and methods of paint objectsCanvas is manipulated by the paint object, so let's start with the basic usage of the paint object.Paint is used to specify the color, size, etc. of a graphic or text. Common properties and methods are as Follows.1, anti-aliasingAntiAlias property: anti-aliasing, true: anti-aliasing, false: not Eliminated.2. Brush ColorColor Property: Gets or sets the Color.3. Alpha OpacityAlpha Property: Gets or sets the Alpha opacity, in the range 0~255.4. Font SizeTextsize property: Gets or sets the font size.5. Contour and fillSetStyle () method: Sets the brush style, whether the outline or fill is drawn.Strokewidth Property: Gets or sets the width of the Outline.6. Set Paint Object ColorSetargb (int a, int r, int g, int B)Sets the Paint object color, and Parameter 1 is Alpha opacity (0~255).7. Set the text zoom multiplierSettextscalex (float ScaleX)Sets the text zoom multiplier, and 1.0f is the original size.8. Set the UnderlineSetunderlinetext (booleanunderlinetext) three, basic usage of canvasThis approach can be divided into two types of environments: one is canvas drawing with normal view, and the other is drawing using a dedicated Surfaceview Canvas. The main difference between the two is that you can define a dedicated thread in Surfaceview to do the drawing work, and the application does not need to wait for the view brush graph to improve performance. The previous one is suitable for small, low frame rate animation, such as chess games, and the latter is mainly used in the game, high-quality animation aspects of the Drawing.The following are common methods of the canvas class.1. Draw a rectangleDrawRect (RECTF rect, Paint Paint)Draws a rectangular area, and the parameter rect represents the size of a single Motive.2. Draw the pathDrawPath (path path, Paint Paint)Draws a path with the path object as the parameter path.3. StickersDrawbitmap (Bitmap Bitmap, rect src, rect dst, paint Paint)Parameter bitmap is the bitmap object, the parameter src is the source area (here is bitmap), The parameter DST is the target area (should be in the Canvas's position and size), The parameter paint is the paint brush object.NoteIf the original rect is not equal to the target rect, the performance of the method will be significantly lost if scaled and stretched.4. Draw the LineDrawLine (float startX, float starty, float stopx, float stopy, paintpaint)The first two parameters are the X-and y-coordinate positions of the starting point, the last two parameters are the X-and y-coordinate positions of the end points, and the final parameter is the paint brush object.5, Draw pointsDrawpoint (float x, float y, paint Paint)The first two parameters are x, y coordinates, and the 3rd parameter is the paint Object.6. Draw TextDrawText (String text, float x, floaty, paint Paint)Canvas class In addition to the above can also depict text, parameter one is a string type of text, parameter 2 is the x axis, parameter 3 is the y axis, parameter 4 is the paint Object.7. Draw EllipseDrawOval (RECTF oval, Paint Paint)The parameter 1 is the bounding rectangle of the ellipse, and the parameter 2 is the paint object;8. Draw a CircleDrawcircle (float cx, float cy, float radius,paint Paint)Parameter 1 is the x-axis of the center point, parameter 2 is the y-axis of the center point, and Parameter 3 is the Radius.9. Arc DrawingDrawArc (RECTF oval, Float startangle, float sweepAngle, boolean usecenter, paint Paint)Parameter 1 is the RECTF object, the bounds of a rectangular area ellipse is used to define the shape, size, arc, parameter 2 is the starting angle (degrees) at the beginning of the arc, the parameter 3 scanning angle (degree) starts to measure clockwise, parameter 4 if true, including the arc of the center of the ellipse and close it, If false, this is an arc; parameter 5 is a paint object; four. render a graphic using the shader classYou may often see some very beautiful graphics in certain interfaces (such as screen saver or player), which are actually rendered on the basis of the original Graphics.Android provides a shader class for rendering effects, an abstract class with many subclasses, such as the Bitmapshader class (bitmap rendering), Composeshader class (mixed rendering), lineargradient class (linear rendering), Radialgradient class (affine rendering), sweepgradient class (gradient rendering), and so On. Use the Setshader () method of the Paint object to set these render objects to be Used.The following code demonstrates its basic usage:Paint p = new paint ();Shader mshader = new lineargradient (0, 0, 100, 100,New int[] {color.red, color.green, color.yellow, color.lightgray}, null, Shader.TileMode.Repeat);P.setshader (mshader); V. Examples1. operation 2. Design Steps(1) Add Ch2102main.axml<pre><pre><? XML version= "1.0" encoding= "utf-8" ?> < xmlns:android= "http://schemas.android.com/apk/res/android" android:o Rientation= "vertical" android:id= "@+id/ch2102_root" Android : layout_width= "match_parent" android:layout_height= "match_parent" /></pre></pre>(2) Add Ch2102MainActivity.cs<pre>usingSystem;usingSystem.Collections.Generic;usingsystem.linq;usingsystem.text;usingandroid.app;usingandroid.content;usingandroid.graphics;usingandroid.os;usingandroid.runtime;usingandroid.views;usingandroid.widget;namespacemydemos.srcdemos{[Activity (Label=""example 21-2" Canvas Basic usage")] public classch2102mainactivity:activity {protected Override voidOnCreate (Bundle Savedinstancestate) {Base. OnCreate (savedinstancestate); Setcontentview (Resource.Layout.ch2102Main); varLayout = findviewbyid<linearlayout>(Resource.Id.ch2102_root); MyView View=NewMyView ( this); View. Setminimumwidth (layout. Width- -); View. Setminimumheight (layout. Height- -); Layout. AddView (view); } } public classMyview:view {PrivateContext context; publicMyView (context context):Base(context) { this. Context =context; } Private voidDrawText (canvas canvas,stringTextintXintY) {using(Paint p =NewPaint ()) {p.color=color.black; P.textsize= -; P.antialias=true;//anti- aliasingCanvas. DrawText (text, x, y, p); } } protected Override voidOnDraw (canvas Canvas) {Base. OnDraw (canvas); Color Drawcolor=color.red; Paint P=NewPaint (); P.color=drawcolor; intX1 = +, y1 = -, dy = the; DrawText (canvas,"draw circles and lines:", x1, y1); Canvas. Drawcircle (x1+ -, y1 + -, -, p);//Small CircleCanvas. Drawcircle (x1 + -, y1 + -, +, p);//great CircleCanvas. DrawLine (0, y1 + -, -, y1 + -, p);//Draw LineY1+=dy; DrawText (canvas,"to Draw an arc:", x1, y1); P.setstyle (Paint.Style.Stroke);//Draw outlines onlyRECTF Oval1 =NewRECTF (x1 + max, y1, x1 + the, y1 + -); Canvas. DrawArc (oval1, the, the,false, p);//Small Arcoval1. Set (x1 + the, y1, x1 + -, y1 + -); Canvas. DrawArc (oval1, the, the,false, p);//Small Arcoval1. Set (x1 + the, y1 + $, X1 + about, y1 + -); Canvas. DrawArc (oval1,0, the,false, p);//Small ArcY1+=dy; DrawText (canvas,"Draw a rectangle:", x1, y1); P.setstyle (Paint.Style.Fill);//Fill OnlyCanvas. DrawRect (x1 + -, y1, x1 + the, y1 + -, p);//SquareCanvas. DrawRect (x1 + $, y1, x1 + the, y1 + -, p);//RectangularY1+=dy; DrawText (canvas,"to draw a fan and ellipse:", x1, y1); Shader Mshader=NewLinearGradient (0,0, -, -, New int[] {color.red, color.green, color.black, color.yellow, color.lightgray},NULL, Shader.TileMode.Repeat); P.setshader (mshader); RECTF Oval2=NewRECTF (x1 + -, y1, x1 + $, y1 + -);//set a new rectangle, scan the measurement//true: Draw a fan, false: draw an arcCanvas. DrawArc (oval2, x1 + -, y1 + -,true, p); //Draw an ellipseoval2. Set (x1 + -, y1, x1 +380, y1 +dy); Canvas. DrawOval (oval2, p); //true: Draw a fan, false: draw an arcRECTF Oval3 =NewRECTF (x1 + the, y1, x1 + -, y1 + -); Canvas. DrawArc (oval3, X1+480, y1 + -,true, p); Y1+=dy; DrawText (canvas,"Draw a triangle:", x1, y1); Path Path=NewPath (); Path. MoveTo (x1+ the, y1);//starting point (the point where the top corner is Located)Path. LineTo (x1 + the, y1 + -); Path. LineTo (x1+260, y1 + -); Path. Close (); //make these points form a closed polygonCanvas. DrawPath (path, p); Y1+=dy; DrawText (canvas,"Draw a polygon:", x1, y1); //draw six shapes (can draw Freeform)P.setstyle (Paint.Style.Stroke);//Draw outlines onlyPath path1 =NewPath (); path1. MoveTo (x1+ -, y1);//upper left cornerpath1. LineTo (x1 + -, y1);//Top Horizontal linepath1. LineTo (x1 + -, y1 + +);//top Right Slashpath1. LineTo (x1 + -, y1 + the);//right Vertical linepath1. LineTo (x1 + -, y1 + -);//lower right Slashpath1. LineTo (x1 + -, y1 + -);//Lower Horizontal linepath1. Close ();//closedCanvas. DrawPath (path1, p); Y1+ = dy + -; DrawText (canvas,"to draw a rectangle with rounded corners:", x1, y1); P.setstyle (Paint.Style.Fill);//FillRECTF Oval4 =NewRECTF (x1 + the, y1, x1 +280, y1 + -); //20: angle of the transverse fillet, 15: angle of the longitudinal filletCanvas. Drawroundrect (oval4, -, the, p); Y1+=dy; DrawText (canvas,"stickers:", x1, y1); Bitmap Bitmap=Bitmapfactory.decoderesource (Resources, Resource.Drawable.ch03ic_launcher); Canvas. Drawbitmap (bitmap, X1+ $, y1, p); } }}</pre>"Android" 21.2 Canvas and paint

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

"Android" 21.2 Canvas and paint

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support