Android curves with smoother signature drawing board

In Android development, in custom view, the corresponding operations of Canvas are used to implement signature-like artboards. However, one problem is that normal Canvas operations can use the artboard to draw the slide of the phone, but when encountering some smooth curves, it will not appear smooth enough, and even have corners. Here, you can use a second-order beizer curve to make the curve more smooth and improve the user experience.

Define a custom SignView, inherited from the View, and define four variables in it:

private Path mPath;
private Paint mPaint;
private float mX;
private float mY;

Initialize the path and brush in the construction method:

public SignView(Context context, AttributeSet attrs) {
 super(context, attrs);
 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 ();
 (10);
 
 mPath = new Path();
}

Doing operations on canvas in onDraw(), it is worth mentioning here that the drawColor method is called, otherwise if saved as a local image in the end, the background will be black. If the brush also chooses black, it will become a completely black picture:

@Override
protected void onDraw(Canvas canvas) {
 (canvas);
 ();
 (mPath, mPaint);
}

Next, rewrite the onTouchEvent method:

@Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (()) {
   case MotionEvent.ACTION_DOWN:
    mX = ();
    mY = ();
    (mX, mY);
    break;
   case MotionEvent.ACTION_MOVE:
    float x1 = ();
    float y1 = ();
    float cx = (x1 + mX) / 2;
    float cy = (y1 + mY) / 2;
    (mX, mY, cx, cy);
    mX = x1;
    mY = y1;
    break;
  }
  invalidate();
  return true;
 }

When the finger is pressed, the coordinates are obtained. When moving, the current left is obtained. Cx is taken between the two points, and cy is used as the control point of the beizer curve. Then, the quadTo method is called to draw the second-order beizer curve and perform the connection operation. In the end, the invalidate method is called to redraw.

This is a simple implementation of the artboard control that makes the connection more smooth. If you need to save it as a local or bitmap object, you need to do some other additional operations.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.