《Android---貝塞爾曲線應用-QQ消息氣泡效果（一）》

前言

很久之前就看到過實現原理了，就是沒有動手去實現一下。最近又看到了貝塞爾曲線相關的文章，於是決定着手寫一個小demo。有什麼不完善的地方，歡迎大家指正。謝謝！

貝塞爾曲線

關於貝塞爾曲線的文章，相信網上有很多。我就不詳細描述了。

二階貝塞爾曲線公式
B（t）=（1 - t）²Po + 2t（1 - t）P1 + t²P2，t∈[0，1]
可轉換爲
B（t）= （1-t）[（1-t）Po + tP1] + t[（1-t）P1 + tP2]

二階貝塞爾曲線示例圖

氣泡實現解析

實現過程

先通過上面的解析計算出各個點的位置，然後開始畫出路徑。

double tan = Math.abs(fixedP.y - dragP.y) / Math.abs(fixedP.x - dragP.x);
mRadian = Math.atan(tan);
float fixedXOffset = (float) (fixedR * Math.sin(mRadian));
float fixedYOffset = (float) (fixedR * Math.cos(mRadian));
float dragXOffset = (float) (dragR * Math.sin(mRadian));
float fdragYOffset = (float) (dragR * Math.cos(mRadian));

fixedP1 = new PointF(fixedP.x - fixedXOffset, fixedP.y - fixedYOffset);
fixedP2 = new PointF(fixedP.x + fixedXOffset, fixedP.y + fixedYOffset);
dragP1 = new PointF(dragP.x - dragXOffset, dragP.y - fdragYOffset);
dragP2 = new PointF(dragP.x + dragXOffset, dragP.y + fdragYOffset);
controlP = new PointF((fixedP.x + dragP.x) / 2, (fixedP.y + dragP.y) / 2);

mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(fixedP.x, fixedP.y, fixedR, mPaint);
canvas.drawCircle(dragP.x, dragP.y, dragR, mPaint);

canvas.drawLine(fixedP.x, fixedP.y, dragP.x, dragP.y, mPaint);

Path path = new Path();
path.moveTo(fixedP1.x, fixedP1.y);
path.quadTo(controlP.x, controlP.y, dragP1.x, dragP1.y);
path.lineTo(dragP2.x, dragP2.y);
path.quadTo(controlP.x, controlP.y, fixedP2.x, fixedP2.y);
path.lineTo(fixedP1.x, fixedP1.y);
canvas.drawPath(path, mPaint);

要畫實心的圖形，改一下畫筆樣式就可以了

效果圖


查看源碼