Best way to draw on canvas Android

Question

whats the best way of drawing the below image on canvas in such a way that the tail should move independent of its body

Below is the code which I tried drawing it:

RectF rectf = new RectF(left, top, right, bottom);                            
path.arcTo(rectf, startAngle, sweepAngle);
path.lineTo(linex, liney);

Explanation :

I am drawing a circle inside a rectangle. I am not drawing a complete circle, I am starting from say 0 degree to 350 degree and then I am drawing a line from where the arc stops.

The image is coming perfect. The problem is with rotation, when I try to rotate the entire canvas rotates but I want only the tail to rotate.

For rotating I am using below code:

//This line is being called inside onDraw()
canvas.rotate(rotation, (left+right)/2, (top+bottom)/2);

I am basically trying to rotate the bubble onTouch event

View.OnTouchListener touch = new View.OnTouchListener() {


    @Override
    public boolean onTouch(View v, MotionEvent e) {
        if(e.getAction() == MotionEvent.ACTION_MOVE){
            float x = e.getX();
            float y = e.getY();
            updateRotation(x,y);
            invalidate();

        }
        return true;
    }
};


public void updateRotation(float x, float y) {

        double r = Math.atan2(x - (getWidth()/2),  (getHeight()/2) - y);
        rotation = (int) Math.toDegrees(r);

   }

My complete onDraw() method is below:

    @Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    path.reset();

    left = 50;
    top = 50;
    right = getWidth()- 50;
    bottom = getHeight()-50;
    startAngle = 100;
    sweepAngle = 335;
    linex = (left + right)/2;
    liney = bottom + 50;

    canvas.rotate(rotation, (left+right)/2, (top+bottom)/2);

    RectF rectf = new RectF(left, top, right, bottom);
    path.arcTo(rectf, startAngle, sweepAngle);
    path.lineTo(linex, liney);

    canvas.clipPath(path);
    canvas.drawPath(path, paint);

    canvas.restore();

}

Image Before rotation:

Image after rotation:

Answer 1

I spent way to much time on this, but it will come in useful for my app.

My idea was to set the point and draw around it, so all you have to do is change linex and liney

How else did you get on?

protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    paint.setColor(mContext.getResources().getColor(R.color.black));

    Path path = new Path();
    int left = 50;
    int top = 50;
    int right = getWidth()- 50;
    int bottom = getHeight()-50;
    int linex = getWidth()/2;
    int liney = getHeight();
    int openSize = 20;


    RectF rectf = new RectF(left, top, right, bottom);
    int angle = (int) angle(new Point(getWidth()/2, getHeight()/2), new Point(linex,liney)); 

    int startAngle = angle + (openSize/2);
    int sweepAngle = 360 - openSize;

    path.arcTo(rectf, startAngle, sweepAngle);
    path.lineTo(linex, liney);
    path.close();
    canvas.drawPath(path, paint);

}

private double angle(Point point1, Point point2) {
    double deltaX = (point1.x - point2.x);
    double deltaY = (point1.y - point2.y);
    double angle =  Math.toDegrees(Math.atan2(deltaY, deltaX));
    if (angle < 0) {
        angle += 360;
    }

    if (angle > 360) {
        angle -= 360;
    }
    // Compensate for 0
    angle -= 180;
    return angle;
}