Update Canvas Preserving Old Canvas Details - android

Hi I'm developing a game in android, for that I have draw 8*8 rectangles using canvas.drawRect() method, now what I need is when user touches on any of the rect, its color has to change. For this I have done as follows.
public boolean onTouchEvent(final MotionEvent event) {
handleTouches(event.getX(), event.getY());
return false;
}
public void handleTouches(float x, float y) {
xLocTouch = (int) x;
yLocTouched = (int) y;
outerLoop: for (int i = 0; i < 8; i++) {
for (int j = 0; j < 8; j++) {
if (GameView.tiles[i][j].rect.contains(xLocTouch, yLocTouched)) {
touched = true;
xTouched = i;
yTouched = j;
break outerLoop;
}
}
}
}
protected void onDraw(Canvas canvas) {
for (int i = 0; i < ROWS; i++) {
for (int j = 0; j < COLS; j++) {
canvas.drawRect(tiles[i][j].rect, paint);
canvas.drawRect(tiles[i][j].rect, p);
if(touched && i==xTouched && j == yTouched) {
Paint touchedColor = new Paint();
touchedColor.setColor(Color.BLUE);
canvas.drawRect(tiles[i][j].rect, touchedColor);
}
}
}
This code is works properly, but the problem is when I touch first time that rect's color changes, but for the second touch it erases old touches position. I need to keep all the touched rect as different color. Is there any way for this?

A Boolean array that tracks the touch state of each rectangle would do the trick. I can't see the external code, but this could be an additional field in your GameView class, and updated appropriately in your handleTouches method.
A perhaps less efficient, less elegant solution would be to just not set the color of the rectangle in onDraw if it's already Color.BLUE (modify your if statement appropriately). You can get the color of the touched pixel using this SE answer, but be forewarned you have to first turn the canvas into a bitmap in order to sample the color (hence the inefficiency).

Related

Java syntax in android studio

What I want to do is to click a space on the screen, get the coordinates and paint the image here. I did this using paintIcon and mouseListener in eclipse but how to do the same thing in android studio? Thanks!
public static Game game = new Game();
public Control(){
this.setLayout(null);
this.setBounds(0, 0, 780, 780);
addMouseListener(this);
}
public void paint(Graphics g){
setBackground(Color.GREEN);
board.paintIcon(this, g, 0, 0);
for(int i = 0; i < 19; i++){
for(int j = 0; j < 19; j++){
if(game.gameBoard.board[i][j] != 'E'){
if(game.gameBoard.board[i][j] == 'B'){
black.paintIcon(this, g, j * 40, i * 40);
}
if(game.gameBoard.board[i][j] == 'W'){
white.paintIcon(this, g, j * 40, i * 40);
}
}
}
}
}
#Override
public void mouseClicked(MouseEvent e) {
// TODO Auto-generated method stub
mouseX = e.getX();
mouseY = e.getY();
int targetX = mouseX / 40;
int targetY = mouseY / 40;
game.move(targetX, targetY);
repaint();
}
In Android you use a different system than in "Java"(you know Android is Java), for instance as is clear from your code you do not have a Mouse but a Touch event.
The first thing you should do is to study this official link that explains the concept of Canvas. Then you will learn how to integrate the "tap" into your app that is instead this official link
This is an excellent post to learn ho to do it.
You begin extending the View and overriding the method onDraw(Canvas canvas) then you need to override a listener that say you when the user clicked the screen onTouchEvent(MotionEvent event) usually there are three motion events you want to cover MotionEvent ACTION_DOWN(you tap and the screen recognizes the X,Y coordinates, that is the one you need),ACTION_MOVE(if you drag your finger maintaining pressure on the screen) and ACTION_UP(when you release your finger)
Just remember you need to call invalidate() if you have an animation or something changes on the screen. Basically is a "forced" call to the "onDraw" method. On the basis of the three links I sent you can cover all thebasis of the 2d graphics in Android that is a bit different by Java because of the different features but also the Android dependency on the specific SDK classes
what I want to do is to click a space on the screen, get the coordinates and paint the image here
Here is an example of how you can obtain that in Android instead of "just" Java, please see the notes comments I did below with the double slashes //
public class YourBoard extends View {//EXTENDS VIEW this is important because you override methods
Drawable editIcon = getResources().getDrawable(R.drawable.icon);
Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background);
float xPos = 0;
float yPos = 0;
public YourBoard (Context context) {//HERE THE CONSTRUCTOR YOU CAN INITIALIZE THINGS HERE
super (context);
}
#Override
protected void onDraw (Canvas canvas) {//This was your paint(Graphics g)
super.onDraw(canvas);
canvas.save();
canvas.drawBitmap(mBitmap, 0, 0, null);
canvas.translate(xPos, yPos);
editIcon.draw(canvas);
canvas.restore();
}
#Override
public boolean onTouchEvent (MotionEvent event) {//THIS WAS YOUR MOUSE LISTENER
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN :
xPos = event.getX();
yPos = event.getY();
invalidate();//NOTICE THE INVALIDATE I MENTIONED
break;
}
return true;
}
}
}

Get pixels from bitmap, display them results in wrong order

I just wrote some code which grabs an image, stores it's pixels into an array and displays every pixel again, so that finally the grabbed image should be shown.
I took following image:
It's an 32x32 png image that I chose to use as an example.
That's my output:
As You might see, the result has far more pixels than 32x32.
Here's how my code looks:
First, an array was created that should get all the pixel informations of the image:
private Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.test);
private int w = b.getWidth;
private int h = b.getHeight;
private int pixels = w*h;
Then I used a method to store the bitmap's pixels into the array:
b.getPixels(pixels, 0, w, 0, 0, w, h);
I thought this should be it, now I can draw the pixels to my View:
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint p = new Paint();
for(int i = 0; i < w; i++) {
for(int j = 0; j < h; j++) {
p.setColor(Color.parseColor(String.format("#%06X", (0xFFFFFF & pixelImage.pixels[i+i*j]))));
canvas.drawRect(i, j, i+1, j+1, paint);
}
}
}
I have no idea where my error is, maybe somebody can help me?
Your algorithm is wrong, and frequently a bit wtf-y. There's no reason for String.format to even come into it, I'm not even sure where you're going there. And drawRect is not the way to do it. Try:
for(int i = 0; i < w; i++) {
for(int j = 0; j < h; j++) {
p.setColor(pixels[i*bmp.getWidth()+j]);
canvas.drawPoint(j, i, paint);
}
}

how to swap images on canvas in android?

I have displayed images from resource in my application as rows and columns randomly.
From those rows and columns i would like to swap the two images when user click on beside of images only.The following code will display the images in rows and columns as randomly.
private void rand(int imagesList[][])
{
Random generator = new Random();
int temp;
for (int i = 0; i < MAX_ROWS; i++)
for(int j = 0; j < MAX_COLS; j++)
{
int randRowPos = generator.nextInt(MAX_ROWS);
int randColPos = generator.nextInt(MAX_COLS);
temp = imagesList[i][j];
imagesList[i][j] = imagesList[randRowPos][randColPos];
imagesList[randRowPos][randColPos]= temp;
}
}
by using the above code i have displayed images as rows and columns.
Here how can i swap the two beside images from rows and columns?
please any body help me.....
I don't have privilege to add comment, so I am posting this as answer.
What do you mean by beside images ?
Is it when user will click on one image , it should get swapped with the image next to it ?
Can you also share the code where you have binned these images to view or any adapterview ?
EDIT :
I too had similar situation at the times when absolute layouts were alive.
What I had done is as follows:
Class:
public class PlayScreen extends Activity implements OnTouchListener
private Panel mainPanel; // Panel for out display
boolean firstClick = false;
OnCreate :
main = new Panel(this);
// Display the panel (calls the ondraw and updates the display)
setContentView(main,new ViewGroup.LayoutParams(screenwidth,screenheight));
// Listen for touchevents on the panel
main.setOnTouchListener(this);
Panel :
class Panel extends View
{
/*
* Init a Panel to draw on and a paint to paint with
*/
Paint mBitmapPaint;
public Panel(Context context)
{
super(context);
mBitmapPaint = new Paint();
}
#Override
protected void onDraw(Canvas canvas)
{
drawImages(canvas);
}
}
drawImages :
private void drawImages(Canvas canvas)
{
for(int i = 0; i<MAX_ROWS; i++){
for(int j=0; j<MAX_COLS; j++)
{
int xpos = j*bmp.getWidth()+j*2;
int ypos = i*bmp.getHeight()+i*2;
bmp = BitmapFactory.decodeResource(mContext.getResources(), items[i][j],opts);
canvas.drawBitmap(bmp,xpos,ypos,mBitmapPaint);
clickzonex.add(xpos);
clickzoney.add(ypos);
clickzonei.add(i);
clickZonej.add(j);
}
}
}
OnTouch:
onTouch(View v, MotionEvent event) :
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
// imply logic
x = (int) event.getX();
y = (int) event.getY();
for(int i = 0; i < clickzonex.size();i++)
{
if((x>clickzonex[i]) && (x<(clickzonex[i]+ bmp.getwidth())) && (y>(clickzoney[i])) && (y<(clickzoney[i]+bmp.getHeight())))
{
// we have a click in a zone so we get the card-number in that zone
if(firstClick == false)
{
itemAti=clickzonei[i];
itemAtj = clickzonej[i];
firstclick = false;
}
else
{
FirstItemToSwap = items[clickzonei[i]][clickzonej[i]];
SecondItemToSwap = items[itemAti][itemAtj];
// Now do the swaping using any algo you like.
main.postInvalidate();
firstclick = true;
}
break;
}
}
return true;
}
else
{
return false;
}
I have just tried to show you the logic using my own example and mixing it with your code. The main point is that in ondraw method just call drawcanvas and on touch just swap the items[][] and call postinvalidate method of Panel class.
I had to do something like this once. I just swapped the image references in the array and did a redraw(invalidate()) on the whole thing.
void swap(int x1, int y1, int x2, int y2) {
// swap items[x1][y1] and items[x2][y2]
........
invalidate();
}
Not quite sure what you are actually asking here, so please try to clarify the question.
One approach could be to use a ViewAnimator as a parent for each of the drawable ImageViews.
<ViewAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slideshow_animator"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
Then once you capture the event that should trigger the swap, you can use the ViewAnimator to swap the View (in your case ImageView) it uses. You can even easily add an animation effect
http://developer.android.com/reference/android/widget/ViewAnimator.html

Drawing to the canvas on Android - screen flickering/tearing

I have an isometric map which I draw to the canvas. When I try and move the map around, these black lines flicker in between some of the tiles making the whole thing look rather shoddy.
Here is the relevant code from my updating thread
public void run() {
Canvas c;
while (isRunning){
c = null;
try {
c = cellMap.getHolder().lockCanvas(null);
synchronized (cellMap.getHolder()) {
cellMap.onDraw(c);
}
} finally {
if( c != null){
cellMap.getHolder().unlockCanvasAndPost(c);
}
}
}
}
and from my CellMap class (which extends SurfaceView):
public void onDraw(Canvas canvas){
canvas.drawColor(Color.BLACK);
int x = 0;
int y = 0;
for(int i = 0; i < mapSize; i++){
for(int j = 0; j < mapSize; j++){
x = (i-j) * 30 + xOffset;
y = (i+j) * 15 + yOffset;
mapCells[i][j].draw(canvas, paint, x, y);
}
}
mapCells[][] is an array of objects which contain the Bitmap image that needs to be drawn. The draw() function is only 1 line canvas.drawBitmap(bitmapImage, x, y, null)
I have discovered that removing the line Canvas.draw(Color.black) gets rid of the flicker. However, when I move the map the canvas is not cleared so I still see the image from the previous frames. I'd imagine it is because it is taking too long to draw the bitmaps? but the map is only very small at the moment.
I found the problem. When moving the map, the offset values were being changed. This lead to sections of the map being drawn temporarily with different offset values - creating the tearing. duh!
I solved this by copying the xOffset and yOffset values at the start of the onDraw() method, and using those values for the update.

GestureDetector with onItemLongclick

How can i integrate GestureDetector with onItemLongClick?
I have a GridView containing three images. When I touch on the first image, I want to display a Toast message. When I lift up my finger from the screen, I want to display a second Toast message.
I know that GestureDetector uses MotionEvent, but onItemLongClick does not. But in this case, I would need to keep track of the image's position ID in the grid, thus it is not possible to implement inside onTouch()?
You can track the motion of the cursor, whether its a onscreen touch or a TrackBall move, using this class and if it crosses over into the next picture you can handle that event then. Here is an example taken from the sdk examples:
#Override public boolean onTouchEvent(MotionEvent event) {
int action = event.getActionMasked();
if (action != MotionEvent.ACTION_UP && action != MotionEvent.ACTION_CANCEL) {
int N = event.getHistorySize();
int P = event.getPointerCount();
for (int i = 0; i < N; i++) {
for (int j = 0; j < P; j++) {
mCurX = event.getHistoricalX(j, i);
mCurY = event.getHistoricalY(j, i);
drawPoint(mCurX, mCurY,
event.getHistoricalPressure(j, i),
event.getHistoricalTouchMajor(j, i));
}
}
for (int j = 0; j < P; j++) {
mCurX = event.getX(j);
mCurY = event.getY(j);
drawPoint(mCurX, mCurY, event.getPressure(j), event.getTouchMajor(j));
}
}
return true;
}
You can read more and see the file in your SDK at C:\YourInstallDir\android-sdk\samples\android-10\ApiDemos\src\com\example\android\apis\graphics\TouchPaint.java or just search the whole examples files for MotionEvent there's a few more uses in them.

Categories

Resources