Here’s an example:

Source address: https://github.com/MegatronKing/FunnyDraw

The project provides a drawing framework, but only a few patterns have been realized, and it is still necessary for the general public to pick up a keyboard to draw

A few more examples (although the graphics don’t match)

use

Step 1: Run the install App and start it

Step 2: Start the server

adb shell
export CLASSPATH=/data/local/tmp/com.github.megatronking.funnydraw
exec app_process /system/bin com.github.megatronking.funnydraw.Main '$@'
Copy the code

Step 3: Click the “Pictograph song Test” button in the App to agree the suspension window permission.

Step 4: Open wechat to start the mini program of “Guess painting” and select the pattern in the list on the right for automatic drawing.

Matters needing attention

  • Some phones need to turn on the analog tap switch in developer mode, like Xiaomi phones.

Project participation and debugging

After forking & Clone the source code, follow these steps to add the custom implementation Sample and submit the Pull Request. The more you participate, the better your project will be!

Debug simulator

After each code modification, the server needs to be restarted in the guessing song applet test. In order to simplify this process, you can debug directly in the App. Click “Debug Current Application” on the home page.

Write a simple Sample such as a circle

Use CircleMotionDrawer development, define the center, radius, drawing time can be.

public class CircleSample implements Sample {

    @NonNull
    @Override
    public MotionDrawer buildDrawer(Canvas canvas) {
        // Place the circle in the center of the canvas according to its position and size
        return new CircleMotionDrawer(canvas.centerX, canvas.centerY, canvas.width / 4, DEFAULT_DURATION); }}Copy the code

Write a complex Sample, such as a wine glass

Complex patterns that need to be combined with various motiondrawers can be combined using MotionDrawerSet.

public class WineGlassSample implements Sample {

    @NonNull
    @Override
    public MotionDrawer buildDrawer(Canvas canvas) {
        // The ellipse of the rim
        int topOvalRadiusX = 200;
        int topOvalRadiusY = 100;
        int topOvalCenterX = canvas.centerX;
        int topOvalCenterY = canvas.centerY - 400;
        OvalMotionDrawer drawer1 = new OvalMotionDrawer(topOvalCenterX, topOvalCenterY,
                topOvalRadiusX, topOvalRadiusY, 0.1000);

        // The ellipse at the bottom of the cup
        int bottomOvalRadiusX = 100;
        int bottomOvalRadiusY = 50;
        int bottomOvalCenterX = canvas.centerX;
        int bottomOvalCenterY = canvas.centerY + 400;
        OvalMotionDrawer drawer2 = new OvalMotionDrawer(bottomOvalCenterX, bottomOvalCenterY,
                bottomOvalRadiusX, bottomOvalRadiusY, 0.1000);

        // Draw bezier curves around the sides of the cup
        int glassBottomX = canvas.centerX;
        int glassBottomY = canvas.centerY + 150;
        QuadBezierMotionDrawer drawer3 = new QuadBezierMotionDrawer(topOvalCenterX - topOvalRadiusX,
                topOvalCenterY, glassBottomX, glassBottomY, canvas.left, canvas.centerY, 1000);
        QuadBezierMotionDrawer drawer4 = new QuadBezierMotionDrawer(topOvalCenterX + topOvalRadiusX,
                topOvalCenterY, glassBottomX, glassBottomY, canvas.right, canvas.centerY, 1000);

        / / handle
        LineMotionDrawer drawer5 = new LineMotionDrawer(glassBottomX, glassBottomY,
                bottomOvalCenterX, bottomOvalCenterY - bottomOvalRadiusY, 500);

        // Combine them in the order you draw them
        return newMotionDrawerSet(drawer1, drawer2, drawer3, drawer4, drawer5); }}Copy the code

Add the developed Sample to the float window list

Configure the classpath and name for Sample in the samples. XML file in assets.

<?xml version="1.0" encoding="utf-8"? >
<samples package="com.github.megatronking.funnydraw.sample">
    <sample name="Glass" class=".WineGlassSample"/>
    <sample name="Circular" class=".CircleSample"/>.</samples>
Copy the code

The API documentation

LineMotionDrawer

Draw a straight line

// Draw from coordinate (500,500) to coordinate (600, 600), draw time 1000ms
MotionDrawer drawer = new LineMotionDrawer(500.500.600.600.1000);
Copy the code

CircleMotionDrawer

Draw a circular

// Take (500,500) as the center of the circle, 100 as the radius, draw clockwise, draw time 1000ms
MotionDrawer drawer = new CircleMotionDrawer(500.500.100.1000);
Copy the code

OvalMotionDrawer

Draw an ellipse

// Take (500,500) as the center of the circle, 100 as the X-axis radius,50 as the Y-axis radius, draw clockwise, draw time 1000ms
MotionDrawer drawer = new OvalMotionDrawer(500.500.100.50.1000);
Copy the code

RectMotionDrawer

Draw a rectangle

// Draw four rectangular points clockwise with the coordinates of (100,100), (500,100), (500,500), (100,500) and (100,500) at 1000ms
Rect rect = new Rect(100.100.500.500);
MotionDrawer drawer = new RectMotionDrawer(rect, 1000);
Copy the code

TriangleMotionDrawer

Draw a triangle

// Draw the triangle vertex clockwise with coordinates (100,100), (300,100), (200,200) as the vertex, draw the time 1000ms
MotionDrawer drawer = new TriangleMotionDrawer(100.100.300.100.200.200.1000);
Copy the code

SerialLinesMotionDrawer

Draw a continuous line segment

Point p1 = new Point(0.0);
Point p2 = new Point(50.50);
Point p3 = new Point(100.200);
Point p4 = new Point(200.500);
// Connect multiple points, draw in sequence, draw time 3000ms
MotionDrawer drawer = new SerialLinesMotionDrawer(new Point[]{p1, p2, p3, p4}, 3000);
Copy the code

QuadBezierMotionDrawer

Draw a second-order Bezier curve

// Use coordinates (100,100) as the starting point of the curve, coordinates (300,300) as the end point of the curve, coordinates (200,200) as the control point, drawing time 1000ms
MotionDrawer drawer = new QuadBezierMotionDrawer(100.100.300.300.200.200.1000);
Copy the code

CubicBezierMotionDrawer

Draw third-order Bezier curves

// With coordinates (100,100) as the starting point, coordinates (300,300) as the ending point, coordinates (200,200) and (200,250) as the control points, the drawing time is 1000ms
MotionDrawer drawer = new CubicBezierMotionDrawer(100.100.300.300.200.200.200.450.1000);
Copy the code

MotionDrawerSet

A graphic combinator that can combine multiple of the above motiondrawers into one