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;
    }

}
           

源碼