Android practical project sharing (1) The artistic journey of drawing Bezier curves with Android Studio

1. Project Overview

Welcome to Creative Source! Our carefully crafted drawing app will take you into a wonderful world of art and technology. By using Android Studio, we have implemented the function of drawing Bezier curves, allowing you to easily create stunning works of art. Whether you are a college student who loves painting or an art lover who is eager to learn, this application will ignite your creative passion and let you immerse yourself in the fun of painting.

2. Main technical points

1. Drawing of Bezier curves: We cleverly used the drawing function of Android Studio to realize the drawing of Bezier curves. With simple operations, you can freely manipulate the shape and curvature of curves, injecting unlimited possibilities into your artwork.
   
   
2. JSON data parsing: Our application supports JSON data parsing, allowing you to easily process data returned by the server. In this way, you can obtain configuration files and other information from the server and use it flexibly during the painting process.
   
   
3. Local file access: We also provide local file access function, allowing you to save and manage your paintings. You can view, edit and share your artistic masterpieces anytime in the app.
   
   
4. Full-screen startup page implementation: We have specially optimized the application startup page to achieve a seamless transition and avoid the embarrassment of a white screen. You will enjoy a perfect user experience, making your creative journey smoother and more natural.

5. Dynamic permission application: We value user privacy and security, so the application supports dynamic permission application. This means that during use, we will ensure that you have control over the required permissions and protect your personal information and device security.
   
   

6. HTTPS communication: We use HTTPS communication protocol to ensure your data transmission security and privacy protection. Whether making a GET request or a POST request, you can confidently interact with the server securely.
   
   

7. Universal Privacy Agreement Service Agreement pop-up window: We care about user privacy. In order to protect your legitimate rights and interests, we provide a Universal Privacy Agreement Service Agreement pop-up window in the application. This gives you a clear understanding of how we handle your personal information and establishes a basis for mutual trust.
   
   

8. Get the configuration file from the server and parse it: Our application can dynamically get the configuration file from the server and parse it. This allows you to keep your app's functionality and features updated at any time, keeping up to date with the latest technology.
   
   

9. Usage and encapsulation of AgentWeb: We use the famous AgentWeb, which can realize the functions of a dedicated browser with one line of code. This provides you with convenient web browsing and search functions, allowing you to get more inspiration and reference in your creations.
   
   

10. Encapsulation of the local log interface: We have encapsulated the local log interface for the application, allowing you to flexibly record and manage the running status of the application. When releasing a version, you can turn off logging as needed to optimize code performance.

Main demo code:

//PanelView.java
package com.csw.luck33;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class PanelView extends View {
    private static final String TAG = "PanelView";

    private Board mBoard;
    private Dot mDotStart;
    private Dot mDotControl1;
    private Dot mDotControl2;
    private Dot mDotEnd;

    private Paint mControlPaint;
    private Paint mBezierPaint;
    private Paint mTextPaint;


    public PanelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBoard = new Board();
        mDotStart = new Dot(this, mBoard, true);
        mDotControl1 = new Dot(this, mBoard, false);
        mDotControl2 = new Dot(this, mBoard, false);
        mDotEnd = new Dot(this, mBoard, true);

        mControlPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mControlPaint.setColor(Color.GREEN);
        mControlPaint.setStyle(Paint.Style.STROKE);
        mControlPaint.setStrokeWidth(5f);

        mBezierPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBezierPaint.setColor(Color.BLUE);
        mBezierPaint.setStyle(Paint.Style.STROKE);
        mBezierPaint.setStrokeWidth(6f);

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mTextPaint.setStrokeWidth(2);
        mTextPaint.setTextSize(30);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //Log.d(TAG, "onTouchEvent:" + event.getAction() + "(" + event.getX() + "," + event.getY() + ")");
        return mDotStart.touchEvent(event)
                || mDotControl1.touchEvent(event)
                || mDotControl2.touchEvent(event)
                || mDotEnd.touchEvent(event);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mBoard.computeWidthAndHeight(this);
        mDotStart.setCenterPoint(mBoard.getTopLeft());

        mDotControl1.setCenterPoint(mBoard.getTopCenter());

        mDotControl2.setCenterPoint(mBoard.getBottomCenter());

        mDotEnd.setCenterPoint(mBoard.getBottomRight());

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mBoard.draw(canvas);
        drawBezierText(mDotStart, mDotControl1, mDotControl2, mDotEnd, canvas);
        drawLine(mDotStart, mDotControl1, canvas);
        drawLine(mDotControl1, mDotEnd, canvas);
        drawLine(mDotStart, mDotControl2, canvas);
        drawLine(mDotControl2, mDotEnd, canvas);
        drawBezier(mDotStart, mDotControl1, mDotControl2, mDotEnd, canvas);

        mDotStart.draw(canvas);
        mDotControl1.draw(canvas);
        mDotControl2.draw(canvas);
        mDotEnd.draw(canvas);

    }

    private void drawLine(Dot start, Dot end, Canvas canvas) {
        canvas.drawLine(start.getX(), start.getY(), end.getX(), end.getY(), mControlPaint);
    }

    private Path mBezierPath = new Path();

    private void drawBezier(Dot start, Dot control1, Dot control2, Dot end, Canvas canvas) {
        mBezierPath.reset();
        mBezierPath.moveTo(start.getX(), start.getY());
        mBezierPath.cubicTo(control1.getX(), control1.getY(), control2.getX(), control2.getY(), end.getX(), end.getY());
        canvas.drawPath(mBezierPath, mBezierPaint);
    }

    private void drawBezierText(Dot start, Dot control1, Dot control2, Dot end, Canvas canvas) {
        canvas.drawText("moveTo( " + start.mCenterPointVirtual.x + " , " + start.mCenterPointVirtual.y + " );"
                        + " cubicTo(" + control1.mCenterPointVirtual.x + " , " + control1.mCenterPointVirtual.y + " , "
                        + control2.mCenterPointVirtual.x + " , " + control2.mCenterPointVirtual.y + " , "
                        + end.mCenterPointVirtual.x + " , " + end.mCenterPointVirtual.y
                        + " );"
                , mBoard.getTopLeft().x / 2f, mBoard.getTopLeft().y / 2f, mTextPaint);
    }
}

3. Development environment

The development environment is the latest version of Android Studio. Just download the latest version from the official website to compile and run.

The jdk version is 17, sdk version 31, gradle plugin version 4.2.2, gradle version 6.7.1.

4. Run the demo

1. Start the program, first is the 1s startup interface.

2. Enter the main interface

Download the source code now , let Android Studio meet your artistic dreams, and create your own unique world together~