Android: How to Zoom, Pan (Scroll) Tic Tac Toe Board View
So I have my own class BoardView extends View. I used a drawing board, lines and an "O" drawing when the user clicks on a cell.
But I was not able to correctly execute the following problems:
1. Zoom BoardView when the user makes a pinch (multi touch).
2. Scroll the BoardView left, right, top to bottom if the BoardView is larger than the BoardView's initial width or height.
3. Find the coordinate of the right cell when the user clicked on the cell after zooming or scrolling.
This is my first game project, please help me if anyone knows how to solve this problem.
I tried it but didn't work as expected. The screen width of the BoardView width and the BoardView width are equal to the BoardView width. This is a square panel.
I am giving 200 bonuses for this problem.
Here is my project, anyone 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 the solution myself, but you need to improve the code, you can answer my question with your solution!
source to share
Could you please move your code to github? It would be much easier to upload, edit, and suggest changes.
If you're looking for a generic implementation of 2x zoom / rotate your finger take a look at my game ( https://github.com/ZieIony/Gravity ). The most interesting part is the GamePanel view and 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 creates a transformation matrix that you must use for drawing.
protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.setMatrix(matrix);
// do your drawing here
canvas.restore();
}
source to share
Take a look at my answer here . If the answer seems to be satisfactory take a look at my github code. I think it's not difficult to realize your third point.
"3. Find the coordinates of the right cell when the user clicked on the cell after zooming or scrolling.",
since it scaleFactor
is available in MyView.java
, and scroll shifts can be obtained with getScrollX()
and getScrollY()
, just by doing some simple math.
source to share