先来一张效果图：

源码地址： https://github.com/MegatronKing/FunnyDraw

项目提供了绘图框架，但只实现了少部分图案，仍需广大人民群众一起拿起键盘来画画

再来几张样例（虽然图形不匹配）

使用方式

第一步：运行安装App并启动

第二步：启动server

adb shell
export CLASSPATH=/data/local/tmp/com.github.megatronking.funnydraw
exec app_process /system/bin com.github.megatronking.funnydraw.Main '$@'
复制代码

第三步：点击App中“猜画小歌测试”按钮，同意悬浮窗权限。

第四步：打开微信启动猜画小歌小程序,选择右侧列表中图案进行自动绘制。

注意事项

• 部分手机需要在开发者模式中打开模拟点击开关，比如小米手机等。

项目参与及调试

Fork & Clone源码后,按照以下步骤添加自定义实现的Sample，然后提交Pull Request。参与越多，项目完成度将越高！

调试模拟器

每次修改代码后，在猜画小歌小程序中测试都需要重启server，为了简化此过程，可以直接在App内调试。点击首页“当前应用调试”。

编写一个简单的Sample，比如圆形

使用CircleMotionDrawer开发，定义好圆心、半径、绘制时间即可。

public class CircleSample implements Sample {@NonNull@Overridepublic MotionDrawer buildDrawer(Canvas canvas) {// 根据画布位置和尺寸，将圆置于画布中心return new CircleMotionDrawer(canvas.centerX, canvas.centerY, canvas.width / 4,DEFAULT_DURATION);}}
复制代码

编写一个复杂的Sample，比如酒杯

复杂的图案，需要组合各种MotionDrawer，可以使用MotionDrawerSet来组合。

public class WineGlassSample implements Sample {@NonNull@Overridepublic MotionDrawer buildDrawer(Canvas canvas) {// 杯口的椭圆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);// 杯底的椭圆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);// 杯身两侧的圆弧，画贝塞尔曲线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);// 杯柄LineMotionDrawer drawer5 = new LineMotionDrawer(glassBottomX, glassBottomY,bottomOvalCenterX, bottomOvalCenterY - bottomOvalRadiusY, 500);// 按照绘制的顺序组合起来return new MotionDrawerSet(drawer1, drawer2, drawer3, drawer4, drawer5);}}复制代码

将开发好的Sample加入到浮窗列表

在assets目录的samples.xml文件中配置好sample的类路径和名称。

<?xml version="1.0" encoding="utf-8"?>
<samples package="com.github.megatronking.funnydraw.sample"><sample name="酒杯" class=".WineGlassSample"/><sample name="圆形" class=".CircleSample"/>...
</samples>
复制代码

API文档

LineMotionDrawer

绘制直线

// 从坐标(500,500)直线绘制到坐标(600, 600)，绘制时间1000ms
MotionDrawer drawer = new LineMotionDrawer(500, 500, 600, 600, 1000);
复制代码

CircleMotionDrawer

绘制圆形

// 以坐标(500,500)为圆心，100为半径，按顺时针绘制，绘制时间1000ms
MotionDrawer drawer = new CircleMotionDrawer(500, 500, 100, 1000);
复制代码

OvalMotionDrawer

绘制椭圆形

// 以坐标(500,500)为圆心，100为x轴半径，50为y轴半径，按顺时针绘制，绘制时间1000ms
MotionDrawer drawer = new OvalMotionDrawer(500, 500, 100, 50, 1000);
复制代码

RectMotionDrawer

绘制矩形

// 以坐标(100,100)、(500,100)、(500,500)、(100,500)为四个矩形点，按顺时针绘制，绘制时间1000ms
Rect rect = new Rect(100, 100, 500, 500);
MotionDrawer drawer = new RectMotionDrawer(rect, 1000);
复制代码

TriangleMotionDrawer

绘制三角形

// 以坐标(100,100)、(300,100)、(200,200)为三角形顶点，按顺时针绘制，绘制时间1000ms
MotionDrawer drawer = new TriangleMotionDrawer(100, 100, 300, 100, 200, 200, 1000);
复制代码

SerialLinesMotionDrawer

绘制连续线段

Point p1 = new Point(0, 0);
Point p2 = new Point(50, 50);
Point p3 = new Point(100, 200);
Point p4 = new Point(200, 500);
// 连接多个点，按照顺序绘制，绘制时间3000ms
MotionDrawer drawer = new SerialLinesMotionDrawer(new Point[]{p1, p2, p3, p4}, 3000);
复制代码

QuadBezierMotionDrawer

绘制二阶贝塞尔曲线

// 以坐标(100,100)为曲线起点、坐标(300,300)为曲线终点、坐标(200,200)为控制点，绘制时间1000ms
MotionDrawer drawer = new QuadBezierMotionDrawer(100, 100, 300, 300, 200, 200, 1000);
复制代码

CubicBezierMotionDrawer

绘制三阶贝塞尔曲线

// 以坐标(100,100)为曲线起点、坐标(300,300)为曲线终点、坐标(200,200)和(200,250)为控制点，绘制时间1000ms
MotionDrawer drawer = new CubicBezierMotionDrawer(100, 100, 300, 300, 200, 200, 200，450, 1000);
复制代码

MotionDrawerSet

图形组合器，可以将以上的多个MotionDrawer组合成一个