Android使用贝塞尔线高仿QQ聊天消息气泡的拖拽效果

先画圆，都会吧。代码如下：

public class Bezier extends View {
    private final Paint mGesturePaint = new Paint();
    private final Path mPath = new Path();
    private float mX1 = 100, mY1 = 150;
    private float mX2 = 300, mY2 = 150;
    private boolean mBezier = true;
    private int mRadius = 30;

    public Bezier(Context context, AttributeSet attrs) {
        super(context, attrs);
        mGesturePaint.setAntiAlias(true);
        mGesturePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mGesturePaint.setStrokeWidth(5);
        mGesturePaint.setColor(Color.RED);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        canvas.drawCircle(mX1, mX2, mRadius, mGesturePaint);
    }

}

效果

拖拽的另个一圆就不画了，效果的实现主要是计算两个点之间的拖拽区域，如下图：

求出区域之后，使用贝塞尔线画出效果就可以了，代码：

public class Bezier extends View {
    private final Paint mGesturePaint = new Paint();
    private final Path mPath = new Path();
    private float mX1 = 100, mY1 = 150;
    private float mX2 = 300, mY2 = 150;
    private boolean mBezier = true;
    private int mRadius = 30;

    public Bezier(Context context, AttributeSet attrs) {
        super(context, attrs);
        mGesturePaint.setAntiAlias(true);
        mGesturePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mGesturePaint.setStrokeWidth(5);
        mGesturePaint.setColor(Color.RED);
        setBezier();
    }

    private void setBezier() {
        float offsetX = (float) (mRadius * Math.sin(Math.atan((mY2 - mY1) / (mX2 - mX1))));
        float offsetY = (float) (mRadius * Math.cos(Math.atan((mY2 - mY1) / (mX2 - mX1))));
        float x1 = mX1 - offsetX;
        float y1 = mY1 + offsetY;

        float x2 = mX2 - offsetX;
        float y2 = mY2 + offsetY;

        float x3 = mX2 + offsetX;
        float y3 = mY2 - offsetY;

        float x4 = mX1 + offsetX;
        float y4 = mY1 - offsetY;

        mPath.reset();
        mPath.moveTo(x1, y1);
        mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x2, y2);//锚点直接取偏移量的一半
        mPath.lineTo(x3, y3);
        mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x4, y4);
        mPath.lineTo(x1, y1);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        //通过画布绘制多点形成的图形
        canvas.drawCircle(mX1, mY1, mRadius, mGesturePaint);
        if (mBezier) {
            canvas.drawPath(mPath, mGesturePaint);
            canvas.drawCircle(mX2, mY2, mRadius, mGesturePaint);
        }
    }
}

效果图：

拖拽效果只要在onTouchEvent里动态改变拖动点的坐标重绘就可以实现了，代码：

public class Bezier extends View {
    private final Paint mGesturePaint = new Paint();
    private final Path mPath = new Path();
    private float mX1 = 100, mY1 = 150;
    private float mX2 = 300, mY2 = 150;
    private boolean mBezier = true;
    private int mRadius = 30;

    public Bezier(Context context, AttributeSet attrs) {
        super(context, attrs);
        mGesturePaint.setAntiAlias(true);
        mGesturePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mGesturePaint.setStrokeWidth(5);
        mGesturePaint.setColor(Color.RED);
        setBezier();
    }

    private void setBezier() {
        float offsetX = (float) (mRadius * Math.sin(Math.atan((mY2 - mY1) / (mX2 - mX1))));
        float offsetY = (float) (mRadius * Math.cos(Math.atan((mY2 - mY1) / (mX2 - mX1))));
        float x1 = mX1 - offsetX;
        float y1 = mY1 + offsetY;

        float x2 = mX2 - offsetX;
        float y2 = mY2 + offsetY;

        float x3 = mX2 + offsetX;
        float y3 = mY2 - offsetY;

        float x4 = mX1 + offsetX;
        float y4 = mY1 - offsetY;

        mPath.reset();
        mPath.moveTo(x1, y1);
        mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x2, y2);//锚点直接取偏移量的一半
        mPath.lineTo(x3, y3);
        mPath.quadTo((mX1 + mX2) / 2, (mY1 + mY2) / 2, x4, y4);
        mPath.lineTo(x1, y1);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        //通过画布绘制多点形成的图形
        canvas.drawCircle(mX1, mY1, mRadius, mGesturePaint);
        if (mBezier) {
            canvas.drawPath(mPath, mGesturePaint);
            canvas.drawCircle(mX2, mY2, mRadius, mGesturePaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mX2 = event.getX();
        mY2 = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mBezier = true;
                setBezier();
                break;
            case MotionEvent.ACTION_MOVE:
                mBezier = true;
                setBezier();
                break;
            case MotionEvent.ACTION_UP:
                mBezier = false;
                break;

        }
        invalidate();
        return true;
    }

}

源码