CODEWITHSUNDEEP
androidviewtouchzooming
SBotirov
SBotirov

Reputation: 14148

Android: How to Zoom, Pan(Scroll) Tic Tac Toe Board View

So, I have a custom BoardView class extends View. I implemented drawing board, lines and drawing "O" drawable when user press on the cell.

But, I could not implement following problems correctly:

1. Zoom BoardView when user doing pinch(multi touch).

2. Scroll BoardView to left, right, top, bottom if BoardView bigger than BoardView initial width or height.

3. Find right cell coordinate when user pressed on the cell after zooming or scrolling.

This is my first game project, please help me if anybody know how to solve this problem.

I tried but did not work properly. BoardView width equal width screen width and BoardView height equal to BoardView width. It is square board view.

I give 200 bounty to implementing this problem.

Here is my project, everyone can download and edit: https://drive.google.com/file/d/0BxNIUTd_m1x8cUQ2NGpSMDBuVVE/view?usp=sharing

Github: https://github.com/boyfox/GameTicTacToe

BoardView code: http://pastie.org/10109253 or http://pastebin.com/TRU8Ybds

I found solution self, but need improving code, you can answer to my question with your solution!

Upvotes: 3

Views: 839

Answers (2)

Durgadass S
Durgadass S

Reputation: 1098

Have a look at my answer here. If the answer seems satisfactory have a look at my github code. I think it is not difficult to implement your third point

"3. Find right cell coordinate when user pressed on the cell after zooming or scrolling.",

because the scaleFactor is available in MyView.java and scroll offsets could be obtained by getScrollX() and getScrollY(), by just doing simple math.

Upvotes: 1

Zielony
Zielony

Reputation: 16537

Could you please move your code to github? It would be much easier to download, edit and propose changes.

If you're looking for a generic implementation of two finger zoom/rotate, take a look at my game (https://github.com/ZieIony/Gravity). The most interesting part is the GamePanel view and the dispatchTouchEvent method: 

private PointF prevPos = new PointF(), prevPos2 = new PointF();
float scale = 1;
final float MIN_SCALE = 0.2f, MAX_SCALE = 2.0f;
float rotation = 0;
Matrix matrix = new Matrix();
private float prevDist;

public boolean dispatchTouchEvent(android.view.MotionEvent event) {
        if (event.getPointerCount() == 2) {
            float d = dist(event.getX(0), event.getY(0), event.getX(1),
                    event.getY(1));
            float pivotX = (event.getX(0) + event.getX(1)) / 2;
            float pivotY = (event.getY(0) + event.getY(1)) / 2;
            float prevPivotX = (prevPos.x + prevPos2.x) / 2;
            float prevPivotY = (prevPos.y + prevPos2.y) / 2;
            if (event.getAction() == MotionEvent.ACTION_MOVE) {
                float newScale = scale * d / prevDist;
                newScale = Math.max(MIN_SCALE,
                        Math.min(newScale, MAX_SCALE));
                float scaleFactor = newScale / scale;
                scale = newScale;

                matrix.postScale(scaleFactor, scaleFactor, pivotX, pivotY);
                float prevAngle = (float) Math.atan2(
                        prevPos.x - prevPos2.x, prevPos.y - prevPos2.y);
                float angle = (float) Math.atan2(
                        event.getX(0) - event.getX(1), event.getY(0)
                                - event.getY(1));
                rotation += prevAngle - angle;
                matrix.postRotate(
                        (float) ((prevAngle - angle) * 180.0f / Math.PI),
                        pivotX, pivotY);

                matrix.postTranslate(-prevPivotX + pivotX, -prevPivotY
                        + pivotY);
            }
            prevPos.x = event.getX(0);
            prevPos.y = event.getY(0);
            prevPos2.x = event.getX(1);
            prevPos2.y = event.getY(1);
            prevDist = d;
        }
        return true;
}

This method produces a transformation matrix, which you should use for drawing.

protected void dispatchDraw(Canvas canvas) {
    canvas.save();
    canvas.setMatrix(matrix);

    // do your drawing here

    canvas.restore();
}

Upvotes: 1

Related Questions