How To Make 2d Graphic Transition In Android Canvas

I have draw a circle using paint and canvas in android . I want to move the circle in some direction, are there any API methods that can be used ? Or do I have to use a loop and ch

Solution 1:

Hi you can refer the code below, In onTouchEvent, you can handle directions and move the object.

// Tutorial2D.java main activity

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Window;

publicclassTutorial2DextendsActivity {
    Square drawView;

    @OverridepublicvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        drawView = newSquare(this);
        drawView.setBackgroundColor(Color.WHITE);
        setContentView(drawView);
    }

}

// Square.java

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.View;

classSquareextendsView {
    Bitmap mBitmap;
    Paintpaint=newPaint();

    publicSquare(Context context) {
        super(context);
    }

    @OverridepublicvoidonDraw(Canvas canvas) {
        canvas.rotate(direction, mCenterX, mCenterY);
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(3);
        canvas.drawRect(230, 230, 280, 280, paint);
        paint.setStrokeWidth(0);
        paint.setColor(Color.CYAN);
        canvas.drawRect(233, 260, 277, 277, paint);
        paint.setColor(Color.YELLOW);
        canvas.drawRect(233, 233, 277, 260, paint);
    }

    privatefloat mCenterX, mCenterY;
    privatefloatdirection=0;
    privatefloat sX, sY;
    privatefloatstartDirection=0;

    privatevoidtouchStart(float x, float y) {
        mCenterX = this.getWidth() / 2;
        mCenterY = this.getHeight() / 2;
        sX = x;
        sY = y;
    }

    privatevoidtouchMove(float x, float y) {
        // this calculate the angle the image rotatefloatangle= (float) angleBetween2Lines(mCenterX, mCenterY, sX, sY, x,
                y);
        direction = (float) Math.toDegrees(angle) * -1 + startDirection;
        this.invalidate();
    }

    @OverridepublicbooleanonTouchEvent(MotionEvent event) {

        floatx= event.getX();
        floaty= event.getY();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // record the start position of finger
            touchStart(x, y);
            break;
        case MotionEvent.ACTION_MOVE:
            // update image angle
            touchMove(x, y);
            break;
        case MotionEvent.ACTION_UP:
            startDirection = direction;
            break;
        }

        returntrue;
    }

    publicdoubleangleBetween2Lines(float centerX, float centerY, float x1,
            float y1, float x2, float y2) {
        doubleangle1= Math.atan2(y1 - centerY, x1 - centerX);
        doubleangle2= Math.atan2(y2 - centerY, x2 - centerX);
        return angle1 - angle2;
    }
}

Solution 2:

It's hard to answer, because it depends on what would be the real application.So maybe it would suit you best to build your "picture" from smaller components like ImageView and then use Animation to move ImageView around. If not, you may need to re paint your canvas.