The method of plotting the Bezier curve in Android sample code _android

Bezier curves, many people may not understand, what is called a Bezier curve? Here is a simple introduction: Bezier curve can also be called Bézieres curve or Bézier curve, it is composed of line segments and nodes, the node is the fulcrum of the drag, line segments like the elastic band. The general vector graphics software often uses the Bezier curve to draw the curve accurately.

In the above introduction, "line segments like a scalable elastic band" is very important, but also particularly good understanding. As for the details of the Bezier curve, you can access the relevant information.

The Bezier curve drawing interface provided by Android

In Android development, the Bezier curve is actually very simple, because Android has provided us with the relevant interface, but this interface method is a bit deep hidden in the path class. This method is as follows:

Android.graphics.Path.quadTo (float x1, float y1, float x2, float y2)

SINCE:API Level 1

Parameter description:

X1: X coordinate of Operation Point

Y1: The y-coordinate of the operation Point

X2: The X coordinate of the end point

Y2: the y-coordinate of the end point

As you can see from the API, Bezier curves are supported from API-1.

An example of a drawing of an Android Bezier curve

Once you are familiar with the method, the following is true:

Surfaceview Framework is not much to say, read my blog should know.

Looking directly at the Mysurfaceview class, this class inherits Surfaceview, which is the main view of the game.

Here for a clearer explanation: here Some of the code is not posted, the final will be posted overall.

The first is to define the related member variables:

Java code

Bezier Curve member variables (starting point, control (Operation Point), termination point, 3 point coordinates) 
private int startx, Starty, Controlx, Controly, EndX, EndY; 
Path 
private path path; 
In order not to affect the main brush, here the Bezier curve is drawn individually with a new brush 
private Paint PAINTQ; 
Random libraries (Make Bezier curves more visible) 

The constructor for this class:

Java code

/** 
 * Surfaceview initialization function/ 
 public 
Mysurfaceview { 
 super (context); 
 ... 
  Bezier curve Related initialization 
  path = new Path (); 
  PAINTQ = new Paint (); 
  Paintq.setantialias (true); 
  Paintq.setstyle (Style.stroke); 
  Paintq.setstrokewidth (5); 
  Paintq.setcolor (color.white); 
  Random = new Random (); 
 ... 

Then I encapsulated the Bezier curve in a single method, and the function is as follows:

Java code

/** 
 * Draw Bezier Curve 
 * 
 * @param canvas main canvas 
/public void Drawqpath (canvas canvas) { 
 Path.reset ();//Reset 
 The start point of the path//Bezier curve 
 Path.moveto (startx, starty); 
 Set the operation point of the Bezier curve and the termination point 
 path.quadto (Controlx, Controly, EndX, EndY); 
 Draw Bezier Curve (path) 
 canvas.drawpath (path, PAINTQ); 

Finally, the user touch-screen listener function and the logical function:

Java code

/** 
 * Touch screen Event Monitor 
/@Override public 
boolean ontouchevent (Motionevent event) { 
 endx = (int) event.getx (); 
 EndY = (int) event.gety (); 
 return true; 
} 
/** 
 * Game logic 
 / 
private void logic () { 
 if (endx!= 0 && endY!= 0) { 
  //Set operation point to half of line x/y 
   
    controlx = Random.nextint ((ENDX-STARTX)/2); 
  Controly = Random.nextint ((endy-starty)/2); 
 } 

   

The entire code is very easy, mainly Bezier function parameters, especially the operation Point, the various operating points can achieve different effects, here I simply unified the point of operation set into the user touch point x, y half, oh lazy ~ ~

I write the Bessel's operation point in the logical logic () function, the constant execution, and each time uses the Nextint function to obtain the random operation Point, mainly in order to let its curve unceasing change thus to form a motion curve movement trajectory.

The screenshot of the running effect is as follows:

Here may be because the picture is still, so the effect does not look very obvious, you can run the source to observe.

Below the entire mysurfaceview of the source code:

Java code

Package Com.qpath; 
Import Java.util.Random; 
Import Android.content.Context; 
Import Android.graphics.Canvas; 
Import Android.graphics.Color; 
Import Android.graphics.Paint; 
Import Android.graphics.Paint.Style; 
Import Android.graphics.Path; 
Import android.view.KeyEvent; 
Import android.view.MotionEvent; 
Import Android.view.SurfaceHolder; 
Import Android.view.SurfaceHolder.Callback; 
Import Android.view.SurfaceView; 
 /** * @author Himi * */public class Mysurfaceview extends Surfaceview implements Callback, Runnable { 
 Private Surfaceholder SFH; 
 Private Paint Paint; 
 private Thread th; 
 Private Boolean flag; 
 Private Canvas Canvas; 
 public static int Screenw, SCREENH; -----------above is the Surfaceview game frame//Bezier Curve member variable (starting point, control (Operation Point), termination point, 3 point coordinates) private int startx, Starty, Controlx, Controly, en 
 DX, EndY; 
 Path private path path; 
 In order not to affect the main brush, here the Bezier curve is drawn individually with a new brush private Paint PAINTQ; 
 Random library (Let Bezier curve more obvious) private Random Random; /** * Surfaceview initialization function
  * * Public Mysurfaceview (context) {super (context); 
  SFH = This.getholder (); 
  Sfh.addcallback (this); 
  Paint = new paint (); 
  Paint.setcolor (Color.White); 
  Paint.setantialias (TRUE); 
  Setfocusable (TRUE); 
  -----------above is the Surfaceview game framework//Bezier curve related initialization path = new Path (); 
  PAINTQ = new Paint (); 
  Paintq.setantialias (TRUE); 
  Paintq.setstyle (Style.stroke); 
  Paintq.setstrokewidth (5); 
  Paintq.setcolor (Color.White); 
 Random = new Random (); /** * Surfaceview View created, responding to this function */public void surfacecreated (Surfaceholder holder) {screenw = This.getwidth () 
  ; 
  Screenh = This.getheight (); 
  Flag = true; 
  instance thread th = new thread (this); 
  Start thread Th.start (); -----------above is Surfaceview game frame}/** * Game drawing/public void Mydraw () {try {canvas = Sfh.lockcanvas () 
   ; 
    if (canvas!= null) {Canvas.drawcolor (color.black); 
   -----------above is the Surfaceview game frame Drawqpath (canvas); 
} catch (Exception e) {   Todo:handle Exception} finally {if (canvas!= null) sfh.unlockcanvasandpost (canvas); /** * Draw Bezier Curve * * @param canvas main canvas/public void Drawqpath (canvas canvas) {path.reset ();//Reset P 
  Ath//Bezier curve starting point Path.moveto (StartX, starty); 
  Set the operation point of the Bezier curve and the termination point path.quadto (Controlx, Controly, EndX, EndY); 
 Draw Bezier Curve (path) canvas.drawpath (path, PAINTQ); 
  /** * Touchscreen Event Monitor/@Override public boolean ontouchevent (Motionevent event) {endx = (int) event.getx (); 
  EndY = (int) event.gety (); 
 return true; /** * Game logic/private void logic () {if (endx!= 0 && endY!= 0) {//Set operation point to half of line x/y Contro 
   LX = Random.nextint ((ENDX-STARTX)/2); 
  Controly = Random.nextint ((endy-starty)/2); }/** * Key event Monitor/@Override public boolean onKeyDown (int keycode, keyevent event) {return Super.onkeyd 
 Own (keycode, event); public void Run () {while (flag) {Long start =System.currenttimemillis (); 
   Mydraw (); 
   Logic (); 
   Long end = System.currenttimemillis (); 
    try {if (End-start <) {Thread.Sleep (End-start)); 
   } catch (Interruptedexception e) {e.printstacktrace (); /** * Surfaceview view state changes in response to this function */public void surfacechanged (surfaceholder holder, int format, int w  
  idth, int height) {}/** * Surfaceview view dies, response to this function/public void surfacedestroyed (Surfaceholder holder) { 
 Flag = false;  } 
}

          above is the Android Bezier curve to draw the sample code, follow-up to continue to supplement the relevant knowledge, thank you for your support for this site!