Is the Android documentation for canvas.drawBitmap wrong? It says:
public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)
Draw the specified bitmap, with its top/left corner at (x,y), using the specified paint, transformed by the current matrix.
Well, x and y don’t seem to be floats, they’re ints; is that correct?
Say I want to overlay the bitmap (which is the size of the available screen, and is bound to a canvas of the same) over the whole available screen. It seems sensible I would:
canvas.drawBitmap(myBitmap, 0, 0, mPaint);
doesn’t it?
But that doesn’t work. What does seem to work is:
canvas.drawBitmap(myBitmap, 2000000, 1000000, mPaint).
Now that statement seems to me to tell the bitmap that it should draw itself a huge distance
Outside the screen! What am I missing here?
In this method x and y are floats, not ints. But like mentioned in the documentation, the x and y coordinates of the bitmaps will be affected by the matrix currently set on the Canvas. In the case of a ScrollView for instance, the matrix could very well contain a very large translation.
What this means is that the coordinates 0, 0 will draw the bitmap at the current origin of the Canvas. That origin is defined by the matrix you can query with getMatrix().
Related
I want to calculate center of a bitmap that is drawn on a canvas with a matrix, it can be rotated, scaled or translated with a arbitrary value. What is the easiest way to find center of the this bitmap on canvas?
You need to apply the matrix to the coordinates of the center of bitmap.
If you use a canvas that has a transformation matrix, you can get the final matrix through Canvas.getMatrix()
If you draw the Bitmap on the Canvas with a Matrix : drawBitmap(bitmap, matrix, paint), then you you need to use that Matrix, or concatenate it to that of the Canvas (in the case it has one).
Then you can finally apply that matrix to the center of the matrix using Matrix.mapPoints.
Something like :
canvas.drawBitmap(bitmap, bitmap_transform, paint);
Matrix full_transform = new Matrix(canvas.getMatrix());
full_transform.postConcat(bitmap_transform);
float[] center = new float[] {bitmap.getHeight()/2.0, bitmap.getWidth()/2.0};
full_transform.mapPoints(center);
Alternatively, if you apply transformations to your bitmap without a matrix, you can use the full_transform.postRotate, full_transform.postScale, etc with the same values. In particular, if you draw your bitmap with drawBitmap(bitmap, left, top, paint) then you need to do a full_transform.postTranslate(left, top).
If you're looking for the "easiest" way then just sticking with the translate rotate and scale functions would solve the problem. The reason that those were developed was so developers wouldn't have to do vector calculus for simple animations. Also the only value you would have to actually calculate in that sense it is the translate value after you take into account the original coordinates.
I am drawing a number of shapes on a canvas. One such shape is a bitmap. Say the center of the bitmap on the canvas is at center xCenter, yCenter such that to draw I call
xLeft = xCenter+mBitmap.getWidth()/2;
yTop = yCenter+mBitmap.getHeight()/2;
canvas.drawBitmap(mBitmap, x,y, mFilledPaint);
So far everything works fine. The next step is to rotate the bitmap around the center xCenter, yCenter. My code below is not doing it. It moves the bitmap all over the place, whereas all I want is for the image to rotate in place around its own center. How can I fix the code below? I already looked at Android: How to rotate a bitmap on a center point and at best I don't understand the responses there.
My code
xLeft = xCenter+mBitmap.getWidth()/2;
yTop = yCenter+mBitmap.getHeight()/2;
matrix.postRotate(30f, xLeft, yTop);
canvas.drawBitmap(mBitmap, matrix, mFilledPaint);
also replacing xLeft and yTop with 0 does not seem to work.. any idea ??
Edit:
xCenter, yCenter is not the center of the canvas. It's just the point where the center of the bitmap lands.
i guess you mean, you can not understand following code:
this.matrix.reset();
this.matrix.setTranslate(this.floatXpos, this.floatYpos);
this.matrix.postRotate((float)this.direction, this.getCenterX(), this.getCenterY());
I think i could give some explanation about this, since i done this task in my project before:
the first line to rest it to identity, which means do thing, because any thing times identity matrix get itself.
the second line, move the original point to the target position,this is actually specify xLeft and yTop to which the bitmap will draw in canvas.
the thrid line, rotate around center point (xLeft+bitmapWidth/2,yTop+Height/2)
To understand this, you need to know how the matrix is used.basically, you bitmap (the points in bitmap is a matrix actually) times the matrix you created here, then it get a new matrix, canvas just draw that new matrix.
I used this function in my Android program:
public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)
However, I want to draw my bitmap not in the position 0 x 0, but in the position 10 x 10 (in PIXELS). The drawBitmap function, however, only accepts float numbers...
How can I achieve this??
Thank you in advance!
Have you tried drawBitmap(bitmap, 10.f, 10.f, ... )? Considering the transformation matrix of the canvas is set to the identity matrix, that is.
The reason those parameters are float is probably that the Canvas does not operate in an integer space (pixels), but in a user specified space defined by a transformation matrix. If you where to set a custom transformation matrix to scale by 2 then using 0.5, 0.5 would end up mapping to pixel 1, 1. This means you could also set a custom transformation to translate by 10, 10 and then just simply draw the bitmap without specifying a destination.
I am looking at one of the sample applications from Google, which deals with touch drawing using canvas:
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/TouchPaint.html
I have a few doubts:
I am not able to understand what's the role of Canvas versus the role
of the bitmap.
In the drawPoint function, I am not able to
understand this code snippet:
mCanvas.drawCircle(x, y, radius, mPaint);
mRect.set((int) (x - radius - 2), (int) (y - radius - 2),
(int) (x + radius + 2), (int) (y + radius + 2));
invalidate(mRect);
If the circle is already drawn into the canvas above, then what happens in the onDraw function where the following code is given:
canvas.drawBitmap(mBitmap, 0, 0, null);
Canvas vs Bitmap
A Bitmap is what the name suggests: A normal image as a bitmap. The Canvas class is an editor for bitmaps. You use it to change the bitmap data, it holds all drawing methods. This principle behaves similar to the shared preferences (if you already worked with them), you have a SharedPreferences class that holds the preferences, and an Editor class to change things.
Drawing the circles
This code does something similar to double buffering. drawPoint() basically draws a circle into the mBitmap object¹. But this bitmap object is not yet visible. It exists in the memory. When onDraw() is called, it has a Canvas argument that represents the drawing surface of the view. All that drawBitmap() does here is use the prepared bitmap from the memory and draw it inside the views graphical representation to make it visible.
¹ The used canvas mCanvas is tied to mBitmap inside onSizeChanged()
if you go to the developper refference:
drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
Draw the
specified bitmap, with its top/left corner at (x,y), using the
specified paint, transformed by the current matrix.
Then if you see that mBitmap doesn't exist in the class , thats cause that var comes from the extend from another activity .
Canvas also has a setBitmap(Bitmap bitmap) function . Then the solution is that that paint in canvas if you have set into it a bitmap object.
From the Android SDK:
The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).
I'm assuming you're referring to this snippet:
#Override protected void onDraw(Canvas canvas) {
if (mBitmap != null) {
canvas.drawBitmap(mBitmap, 0, 0, null);
}
}
Well it looks like an override of an inherited onDraw method which by default probably 'does nothing', hence the override to actually give it some behaviour, in this case given a non-null Bitmap instance, make the canvas draw it.
I'm writing my first app of any consequence, so I may be going about this the entire wrong way, but...
I have a resource image that is 1600x880. I'd like to fill the entire screen with a subset of that image to my canvas, such that an arbitrary x,y coordinate marks the top-left corner drawn at the top-left corner of the screen. For instance, if I was viewing this image on an N1 and I entered x=100 and y=50, I'd expect to see from 100,50 to 580,850 since it's display area is 480x800.
I think I need to use Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint). But, no matter what I plug in to either Rect (even if it's a perfectly sane set of values that shouldn't butt up against any edges of the image), I end up with an unexpected area or a grossly stretched/smooshed output.
I've tried using various combinations of calculations involving display.getWidth() and getHeight(), canvas.getWidth() and getHeight(), and bitmap.getWidth() and getHeight() but nothing seems to be working.
I don't know what I'm doing wrong.