Android, Move Bitmap Along a Path

Android, move bitmap along a path?

I'm thinking of one solution:

         _
       /   \

If your arc has this kind of shape (meaning less than half a circle and positioned horizontaly) then you could iterate the x value and for that x get the y that's on the path. Then move your bitmap to that position.

Move bitmap along a changing path

If you are facing a similar problem to mine then check out Rebound, courtesy of pskink. It solved my issues.

Move bitmap along a changing path

If you are facing a similar problem to mine then check out Rebound, courtesy of pskink. It solved my issues.

Android move object along a path

You would need to move your circle a little bit each frame towards the next waypoint and detect once it gets there, then start moving toward the next. There is no built in system that I know of.

Android Canvas. Moving and Rotating Bitmap along Circular Path based on Touch?

Update: Full example posted on GitHub at https://github.com/jselbie/xkcdclock

Every time you get a touch event, grab the touch point's x,y coordinates and compute the angle of the rotation relative to the center of bitmap. Use that value to determine how much to rotate the bitmap you want draw.

First, let's assume a logical coordinate system in which the center point of your element above is at (0,0) in x,y space.

Therefore, the angle (in degrees) between any touch point relative to the center can be computed as follows:

double ComputeAngle(float x, float y)
{
    final double RADS_TO_DEGREES = 360 / (java.lang.Math.PI*2);
    double result = java.lang.Math.atan2(y,x) * RADS_TO_DEGREES;

    if (result < 0)
    {
        result = 360 + result;
    }

    return result;
}

Note - the normalization of negative angles to positive angles. So if the touch point is (20,20), this function above will return 45 degrees.

To make use of this method, your Activity will need the following member variables defined:

float _refX;   // x coordinate of last touch event
float _refY;   // y coordinate or last touch event
float _rotation;  // what angle should the source image be rotated at
float _centerX;         // the actual center coordinate of the canvas we are drawing on
float _centerY;         // the actual center coordinate of the canvas we are drawing on

Now let's examine how to keep track of touch coordinates to we can always have an up to date "_rotation" variable.

So our "touch handler" for Android will look something like this:

boolean onTouch(View v, MotionEvent event)
{
    int action = event.getAction();
    int actionmasked = event.getActionMasked();

    if (!_initialized)
    {
        // if we haven't computed _centerX and _centerY yet, just bail
        return false;
    }

    if (actionmasked == MotionEvent.ACTION_DOWN)
    {
        _refX = event.getX();
        _refY = event.getY();
        return true;
    }
    else if (actionmasked == MotionEvent.ACTION_MOVE)
    {

        // normalize our touch event's X and Y coordinates to be relative to the center coordinate
        float x = event.getX() - _centerX;
        float y =  _centerY - event.getY();

        if ((x != 0) && (y != 0))
        {
            double angleB = ComputeAngle(x, y);

            x = _refX - _centerX;
            y = _centerY - _refY;
            double angleA = ComputeAngle(x,y);

            _rotation += (float)(angleA - angleB);

            this.invalidate();  // tell the view to redraw itself
        }
    }    

There's some fine details left out such as drawing the actual bitmap. You might also want to handle the ACTION_UP and ACTION_CANCEL events to normalize _rotation to always be between 0 and 360. But the main point is that the above code is a framework for computing the _rotation at which your Bitmap should be drawn on the View. Something like the following:

void DrawBitmapInCenter(Bitmap bmp, float scale, float rotation, Canvas canvas)
{
    canvas.save();
    canvas.translate(canvas.getWidth()/2, canvas.getHeight()/2);
    canvas.scale(scale, scale);
    canvas.rotate(rotation);
    canvas.translate(-bmp.getWidth()/2, -bmp.getHeight()/2);
    canvas.drawBitmap(bmp, 0, 0, _paint);
    canvas.restore();
}

Move an Image bitmap on a Path drawn on layout background

Shortest answer ever - 'Use OpenGL, Luke'
You can also use one of OGL frameworks i.e. AndEngine.

---

Related Topics