How to make 2D graphic transition in android canva

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 changing the position each time?

回答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;

public class Tutorial2D extends Activity {
    Square drawView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        drawView = new Square(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;

class Square extends View {
    Bitmap mBitmap;
    Paint paint = new Paint();

    public Square(Context context) {
        super(context);
    }

    @Override
    public void onDraw(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);
    }

    private float mCenterX, mCenterY;
    private float direction = 0;
    private float sX, sY;
    private float startDirection = 0;

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

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float x = event.getX();
        float y = 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;
        }

        return true;
    }

    public double angleBetween2Lines(float centerX, float centerY, float x1,
            float y1, float x2, float y2) {
        double angle1 = Math.atan2(y1 - centerY, x1 - centerX);
        double angle2 = Math.atan2(y2 - centerY, x2 - centerX);
        return angle1 - angle2;
    }
}

回答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.