先來一張效果圖：
原始碼地址： 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
@Override
public 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
@Override
public 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組合成一個