Android graphical user interface of the drawing (a)
December 10, 2011
BasicViewDraw.java package com.view;
import com.test.R;
import android.view. View;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Path;
import android.graphics.Shader;
import android.graphics.LinearGradient;
/ * Custom View of inherited MyView * /
public class BasicViewDraw extends View {
public BasicViewDraw (Context context) {
super (context);
}
/ * Rewrite onDraw () * /
@ Override
protected void onDraw (Canvas canvas) {
super.onDraw (canvas); < br />
/ * set the background to white * /
canvas.drawColor (Color.WHITE);
Paint paint = new Paint ();
/ * to zigzag * /
paint.setAntiAlias ??(true);
/ * set the paint color * /
paint.setColor (Color.RED);
/ * Set the style to paint STROKE: Hollow * /
paint.setStyle (Paint.Style.STROKE); < br />
/ * set the paint of the frame width * /
paint.setStrokeWidth (3);
/ * draw a hollow circle * / < br />
canvas.drawCircle (40, 40, 30, paint);
/ * draw a hollow square * /
canvas.drawRect (10, 90, 70, 150, paint);
/ * draw a hollow rectangle * /
canvas.drawRect (10, 170, 70, 200, paint);
/ * draw a hollow ellipse * /
RectF re = new RectF (10, 220, 70, 250);
canvas.drawOval ( re, paint);
/ * draw a hollow triangle * /
Path path = new Path ();
path.moveTo (10 , 330);
path.lineTo (70, 330);
path.lineTo (40, 270);
path.close ( ); / / remember to close
canvas.drawPath (path, paint);
/ * draw a hollow trapezoid * /
Path path1 = new Path ();
path1.moveTo (10, 410);
path1.lineTo (70, 410);
path1. lineTo (55, 350);
path1.lineTo (25, 350);
path1.close ();
canvas.drawPath ( path1, paint);
/ * Set the style to paint FILL: Solid * /
paint.setStyle (Paint.Style.FILL);
/ * set the paint color * /
paint.setColor (Color.BLUE);
/ * draw a solid circle * /
canvas.drawCircle (120, 40, 30, paint);
/ * draw a solid square * /
canvas.drawRect (90, 90, 150, 150, paint);
/ * draw a filled rectangle * /
canvas.drawRect (90, 170, 150, 200, paint);
/ * draw a filled ellipse * /
RectF re2 = new RectF (90, 220, 150, 250);
canvas.drawOval (re2, paint);
/ * draw a filled triangle * /
Path path2 = new Path ();
path2.moveTo (90, 330);
path2.lineTo (150, 330);
path2.lineTo (120, 270);
path2.close ();
< br /> canvas.drawPath (path2, paint);
/ * draw a solid trapezoid * /
Path path3 = new Path ();
path3.moveTo (90, 410);
path3.lineTo (150, 410);
path3.lineTo (135, 350);
< br /> path3.lineTo (105, 350);
path3.close ();
canvas.drawPath (path3, paint);
/ * set the gradient color * /
Shader mShader = new LinearGradient (0, 0, 100, 100, new int [] {
Color.RED, Color.GREEN , Color.BLUE, Color.YELLOW}, null,
Shader.TileMode.REPEAT);
paint.setShader (mShader);
/ * draw a gradient circle * /
canvas.drawCircle (200, 40, 30, paint);
/ * draw a gradient square * /
canvas.drawRect (170, 90, 230, 150, paint);
/ * draw a gradient rectangle * /
canvas.drawRect (170 , 170, 230, 200, paint);
/ * Draw a gradient oval * /
RectF re3 = new RectF (170, 220, 230, 250);
canvas.drawOval (re3, paint);
/ * draw a gradient triangle * /
Path path4 = new Path ();
path4.moveTo (170, 330);
path4.lineTo (230, 330);
path4.lineTo (200, 270) ;
path4.close ();
canvas.drawPath (path4, paint);
/ * draw a gradient ladder * / < br />
Path path5 = new Path ();
path5.moveTo (170, 410);
path5.lineTo (230, 410); < br />
path5.lineTo (215, 350);
path5.lineTo (185, 350);
path5.close ();
canvas.drawPath (path5, paint);
/ * write * /
paint.setTextSize (24);
canvas.drawText (getResources (). getString (R.string. str_text1), 240, 50, paint);
canvas.drawText (getResources (). getString (R.string. str_text2), 240 , 120, paint);
canvas.drawText (getResources (). getString (R.string. str_text3), 240, 190, paint);
canvas.drawText ( getResources (). getString (R.string. str_text4), 240, 250, paint);
canvas.drawText (getResources (). getString (R.string. str_text5), 240, 320, paint );
canvas.drawText (getResources (). getString (R.string. str_text6), 240, 390, paint);
}}
BasicView2Draw.java class BasicView2Draw extends View {
Paint paint;
Bitmap bitmap;
public BasicView2Draw (Context context) {
super (context);
paint = new Paint (Paint.ANTI_ALIAS_FLAG);
bitmap = BitmapFactory.decodeResource (getResources (), R.drawable. icon);
}
private Bitmap createBitmap1 () {
Bitmap bitmap1 = Bitmap.createBitmap (100, 100, Config.ARGB_8888);
Canvas canvas = new Canvas (bitmap1);
canvas.drawColor (Color.BLUE);
/ / canvas.drawARGB (0, 0, 0, 0); / / transparent color
canvas.drawBitmap (bitmap, 0, 0, paint);
canvas.drawText (“Hello Android”, 25 , 55, paint);
return bitmap1;
}
@ Override
protected void onDraw (Canvas canvas ) {
super.onDraw (canvas);
/ / draw the bitmap
/ / 1. draw the bitmap in (10, 10 ) position
canvas.drawBitmap (createBitmap1 (), 10, 10, paint);
/ / 2.canvas.drawBitmap (Bitmap bitmap, Rect src, Rect dest , Paint paint);
/ / canvas.drawBitmap (Bitmap bitmap, Rect src, RectF dest, Paint paint);
/ / draw the bitmap to a specified rectangle dest, the bit map will automatically pan and zoom and other operations, if the src parameter is not null
/ / will be cut to some areas of the bitmap to draw
Rect rect = new Rect (10, 10, 50, 60);
RectF rectF1 = new RectF (180.0f, 20.0f, 240.0f, 80.0f);
RectF rectF2 = new RectF (180.0f, 100.0f, 240.0f, 160.0f);
canvas.drawBitmap (createBitmap1 (), null, rectF1, paint);
canvas.drawBitmap (createBitmap1 (), rect, rectF2, paint);
/ / point
paint.setStyle (Paint.Style.FILL_AND_STROKE);
< br /> paint.setStrokeWidth (5.0f);
paint.setColor (Color.YELLOW);
canvas.drawPoints (new float [] {120,120,140,140,160,160,180,180}, paint) ;
/ / line
paint.reset ();// reset the brush
paint.setColor (Color.GREEN);
paint.setAntiAlias ??(true);
canvas.drawLine (30, 30, 130, 40, paint);
paint.setColor (Color. RED);
canvas.drawLines (new float [] {40,40,140,40, 50,50,90,90}, paint);
/ / rectangular < br />
paint.setColor (Color.CYAN);
canvas.drawRect (10, 150, 150, 250, paint);
paint.setColor (Color.GRAY);
canvas.drawRect (new Rect (10, 260, 150, 280), paint);
paint.setColor (Color.DKGRAY);
canvas.drawRect (new RectF (20.2f, 290.9f, 120.2f, 300.3f), paint);
/ / draw the text
/ / paint.setTextSize (20);
/ / paint.setColor (0×40ffffff); / / translucent white
/ / paint.setTextAlign (Paint.Align. RIGHT); / / alignment direction
/ / canvas.drawText (“Cool Android”, 250, 180, paint); / / Here note that the coordinates (180,180) is the text of the left point coordinates < br />
/ / Canvas translation:
/ / shift in pixels, respectively, in x, y-axis translation of pixels
/ / positive numbers represent the positive direction, x-axis is the right plane, y-axis below the plane, the corresponding, a negative shift in the opposite direction
/ / canvas.translate (30.0f, 30.0f );
/ / Canvas Zoom:
/ / parameters are thinking about x, y axis zoom in or out of the multiple, enlarge 1 rain, less than 1 narrow,
/ / default to the origin of scaling the canvas origin (0,0), you can also specify the zoom origin
/ / canvas.scale (2.0f, 1.5 f);
/ / canvas.scale (0.5f, 0.5f, 100.0f, 100.0f); / / specify the coordinates (100.0f, 100.0f) for the zoom origin
/ / This method of analysis at the second scale, in fact, the system for us to do so
/ *
scale (float sx, float sy, float px, float py) {
translate (px, py);
scale (sx, sy);
translate (-px, – py);
}
* /
/ / canvas rotation
/ / 1. to the canvas for the origin , clockwise 40.0f degrees
/ / canvas.rotate (40.0f);
/ / 2. to (100.11f, 100.22f) to the origin, clockwise rotation 50.0f degrees
/ / canvas.rotate (50.0f, 100.11f, 100.22f);
/ / Accordingly, in order to deepen understanding, let us analyze what the first two rotation method
/ /, in fact, the system for us to do so
/ *
rotate (float degrees, float px , float py) {
translate (px, py);
rotate (degrees);
translate (-px,-py);
}
* /
/ / canvas tilt
/ / skew (float sx, float xy); the canvas in the x and y-axis corresponding tilting angle, sx or sy for the tilt angle of the tan value,
/ / if canvas.skew (1,0); tilting in the x 45 degrees>> tan (45) = 1
/ / canvas.skew (1,0);
}
}
ClipRectDraw.java package com.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics . Region;
import android.util.AttributeSet;
import android.view.View;
/ **
* ———————————————– — – ——————————————– rectangular area —–< br />
* canvas.clipRect (upper left corner x-coordinate, y-coordinate of the upper left corner, lower right x-coordinate, y-coordinate of the lower right corner, Region.Op.XOR); < br />
* The last parameter has multiple options are:
* / / DIFFERENCE is the first time different from the second part of the display
/ / REPLACE is to show the second
/ / REVERSE_DIFFERENCE is the second time different from the first part of the show
/ / INTERSECT: intersection display
< br /> / / UNION: Show all
/ / XOR complement, that is, minus the intersection of the remaining part of the Complete Works of display
* @ author emmet1988.iteye.com * < br />
* /
public class ClipRectDraw extends View {
Context context;
Paint paint;
< br /> Path path;
public ClipRectDraw (Context context) {
super (context);
init ();
}
public ClipRectDraw (Context context, AttributeSet attrs) {
super (context, attrs);
init ();
}
public ClipRectDraw (Context context, AttributeSet attrs, int defStyle) {
super (context, attrs, defStyle);
init ();
}
private void init () {
paint = new Paint ();
paint.setAntiAlias ??(true);
paint.setStrokeWidth (5);
paint.setTextSize (15);
paint.setTextAlign (Paint.Align.RIGHT);
path = new Path ();
}
@ Override
< br /> protected void onDraw (Canvas canvas) {
super.onDraw (canvas);
canvas.drawColor (Color.GRAY);
/ / upper left
canvas.save ();
canvas.translate (10, 10);
drawScene (canvas); < br />
canvas.restore ();
/ / upper right
canvas.save ();
canvas.translate (160, 10);
canvas.clipRect (10, 10, 90, 90);
canvas.clipRect (30, 30, 70, 70, Region.Op . XOR);
drawScene (canvas);
canvas.restore ();
/ / left in Figure
canvas.save ();
canvas.translate (10, 130);
path.reset ();
/ * Parabolic curve * /
path.cubicTo (0, 0, 100, 0, 100, 100);
path.cubicTo (100, 100, 0, 100, 0, 0);
canvas.clipPath (path, Region.Op.REPLACE);
drawScene (canvas);
canvas.restore () ;
/ / the right in Figure
canvas.save ();
canvas.translate (160, 130);
< br /> canvas.clipRect (0, 0, 60, 60);
canvas.clipRect (40, 40, 100, 100, Region.Op.UNION);
drawScene (canvas);
canvas.restore ();
/ / bottom left
canvas.save ();
canvas.translate (10, 250);
canvas.clipRect (0, 0, 60, 60);
canvas.clipRect (40, 40, 100, 100, Region.Op.XOR);
drawScene (canvas);
canvas.restore ();
/ / lower right Figure
canvas.translate (160, 250);
canvas.clipRect (0, 0, 60, 60);
canvas.clipRect (40, 40, 100, 100, Region.Op.REVERSE_DIFFERENCE);
drawScene (canvas);
canvas.restore ();
}
private void drawScene (Canvas canvas) {
canvas.clipRect (0, 0, 100, 100);
canvas.drawColor (Color.WHITE);
paint.setColor (Color.RED);
canvas.drawLine (0, 0, 100, 100, paint);
paint.setColor (Color.GREEN);
canvas.drawCircle (30, 70, 30, paint);
paint.setColor (Color.BLUE) ;
canvas.drawText (“ChenJianLi”, 100, 30, paint);
}}
MatrixDraw.java package com.view;
import com.test.R;
import android.content.Context;
import android.graphics.Bitmap;
< br /> import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android . graphics.drawable.BitmapDrawable;
import android.view.View;
/ **
* in the Android inside, Matrix from 9 float value form, is a 3 * 3 matrix.
* cosX,-sinX, translateX
* sinX, cosX, translateY
* 0,0, scale
* explain the above sinX and cosX, said rotation value of cos and sin values, attention,
* clockwise rotation angle is calculated. translateX and translateY that the amount of x and y translation.
* scale is the scaling ratio of 1 is constant, 2 is that the zoom 1 / 2,
* @ author emmet1988.iteye.com *
< br /> * /
public class MatrixDraw extends View implements Runnable {
Bitmap bitmap;
Matrix matrix = new Matrix ();
Paint paint;
public MatrixDraw (Context context) {
super (context);
bitmap = ((BitmapDrawable ) getResources (). getDrawable (R.draw able.rotate_surfaceview)). getBitmap ();
paint = new Paint ();
paint.setAntiAlias ??(true);
new Thread (this). start ();
}
float m;
float n; < br />
@ Override
protected void onDraw (Canvas canvas) {
/ *
float cosValue = (float) Math . cos (-Math.PI / m);
float sinValue = (float) Math.sin (-Math.PI / m);
Log.d (” matrixdraw “,” Math.PI = ” Math.PI);
Log.d (” matrixdraw “,” Math.PI / m = ” Math.PI / m);
Log.d (“matrixdraw”, “Math.cos (-Math.PI / m) =” (float) Math.cos (-Math.PI / m));
Log.d (“matrixdraw”, “Math.sin (-Math.PI / m) =” (float) Math.sin (-Math.PI / m));
matrix . setValues ??(new float [] {
cosValue,-sinValue, 100,
sinValue, cosValue, 100,
0, 0, 2
});// For example, if the scale value of 0.9, representing one-tenth the original image to enlarge
/ / super.onDraw (canvas); / / of course, If the interface needs to draw on other elements, just to write this sentence on the line.
/ / Matrix matrix2 = new Matrix (matrix);
canvas.drawBitmap (bitmap, matrix, paint);
/ / canvas. drawBitmap (bitmap, matrix2, paint);
* /
n ;
if (n == 60) {
n = 0;
}
matrix.postRotate (n);
matrix.postTranslate (n, n);
matrix.postScale (1, 1, n, n);
canvas.drawBitmap (bitmap, matrix, paint);
} < br />
@ Override
public void run () {
while (! Thread.currentThread (). isInterrupted ()) {
< br /> try {
Thread.sleep (100);
postInvalidate ();
} catch (InterruptedException e) {
Thread.currentThread (). interrupt ();
}
}
}
/ **
* in the top left corner of the vertex, half scale, rotate 30 degrees,
* and then along the x axis and y-axis shift 50 pixels, respectively, < br />
* code which is written in 100, why is it pan 50,
* because the scaling of the half.
* we can set about the value of the Matrix, or try two
* Matrix multiplication, the value is set to get into,
* so as to be more skilled on the Matrix.
* /}
