I've created a simple custom control in android and on it I place a background image. I'm having problems when the control is placed on a layout at different sizes (i.e. when it is stretched), specifically:
I wish to overlay a rectangle at a specific position and size, which I know the pixel position for the original image. How can I do this with my control. I suspect something like this is impossible given it's a 9-patch. Is my best bet to work out the percentage from the top/left on the original or is that pointless given some parts stretch and some don't?
In the custom control I set the image like this in the constructor:
setBackgroundResource(R.drawable.buttonbt);
Which is working just fine, however I wanted to originally draw it in the onDraw event as I might want to change it depending on property changes, e.g.
Bitmap b=BitmapFactory.decodeResource(getResources(), R.drawable.buttonbt);
canvas.drawBitmap(b, 0, 0, null);
But this does not resize according to the size of its bounding box, it is simply trying to show it at it's original size without scaling to fit. How would you do this (whether the former method is better or not).
thanks.
You can create a scaled bitmap as below
Bitmap bitmap = Bitmap.createScaledBitmap(b, width, height, true);
Hope it will work for you. Please let me know!
ok when your View is say 100x100 px and your Bitmap is 300x300 you can try the following (pseudo code here) in inDraw method:
# src is a Bitmap 300x300
# dst is a View 100x100
mMatrix.setRectToRect(RectF src, RectF dst, Matrix.ScaleToFit stf)
canvas.save()
canvas.concat(mMatrix)
canvas.drawBitmap(mBitmap, 0, 0, null)
// actually it will draw a rect with left/top edge at (10, 10) and right/bottom at (20, 20)
canvas.drawRect(30, 30, 60, 60, paint)
canvas.restore()
Related
My App have a feature that let's the user capture photo and add drawing on that photo.
All the photo's are re-sized to exactly 900 x 900.
To allow the user add drawing to the image. I keep a transparent image over the original image and do the drawing on the transparent image. Drawing is done using canvas.
But when drawing in a device that has 720 x 480 (height x width). If i create a 900 x 900 transparent image and draw a line from 0,0 to 900,900, canvas only draws line from 0,0 to 480,480.
Below is the respective portion of the code:
Preparing Canvas:
holder = getHolder();
if (holder.getSurface().isValid()) {
Canvas canvas = holder.lockCanvas();
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
/* original image is 900 x 900 */
overlayBitmap = Bitmap.createBitmap(originalImage.getWidth(), originalImage.getHeight(), originalImage.getConfig());
canvas.setBitmap(overlayBitmap);
}
Drawing Line:
canvas.drawLine(0, 0, 900, 900, paint);
I have no idea why i am having this issue. It is because of using canvas?? Is there any work around? Any help is highly appreciated :-)
After some more reading about canvas and also help from this post i was able to fix the issue.
The issue was in the canvas clip rectangle. It was (0,0,480,480) by default as device display was 720 x 480 i guess? So whatever was on the bitmap was always clipped down to 480 x 480.
Later i modified my code like this:
holder = getHolder();
if (holder.getSurface().isValid()) {
Canvas canvas = holder.lockCanvas();
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
/* original image is 900 x 900 */
overlayBitmap = Bitmap.createBitmap(originalImage.getWidth(), originalImage.getHeight(), originalImage.getConfig());
canvas.setBitmap(overlayBitmap);
/* set extended clip rectangle for the larger target bitmap */
Rect clipRect = canvas.getClipBounds();
clipRect.set(0, 0, image.getWidth(), image.getHeight());
canvas.clipRect(clipRect, Region.Op.REPLACE);
}
After replacing clip rectangle size with image size everything worked just fine.
Just because a photo is 900x900, that doesn't mean that it's exactly those many pixels when displayed on the device screen. Device screens can have very different sizes, and when an image (or any view for that matter) is told to expand its with to fit the screen, or measured in dp (device independent pixels), the actual number of device pixels will vary depending on the device screen.
Your code needs to be sensitive to these differences. When you do your drawing, don't assume the size of the Canvas of a view. Instead, ask the view how big it is, and perform all the drawing based on the actual measured size.
Suppose, we've got a display sized 100x100, an image 100x50, and I want to enlarge that image so that it has the same height as the screen does. So the image will be 200x100. After that I want to make the animation of image movement to the left and to the right. I've found 2 ways of the realization of my task:
To create a new image using Bitmap.createScaledBitmap(). But the
image created this way will occupy twice more RAM.
To use matrix.setScale() in every onDraw(). But this works very
slow. Is there any other better solution?
The second method is slow because you calculate your "matrix" on every frame! Since your matrix is always the same thing and it does not change, you can pre-calculate your matrix and save it as a "field" in you class, then just use this function to draw it on screen:
canvas.drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)
It should be fast enough. The other option is to use:
canvas.drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
Again, try to pre-calculate stuff as much as possible. In this case, pre-calc src and dst rectangles.
How can I fill the screen with texture? I can get screen size and density, also a bitmap size. But what next? should I transform texture with matrix or use special paint? Anything else? Thanks.
How about
Bitmap background = Bitmap.createScaledBitmap
(YourBitmap, ScreenWidth, ScreenHeight, false);
You've got a blank canvas, there's all kinds of things you can do with it! For example, to draw a bitmap, you could add the bitmap to res/drawable and do something like
bitmap = BitmapFactory.decodeResource(caller.getResources(), r_bitmap);
canvas.drawBitmap(bitmap, draw_x - (bitmap.getWidth() / 2), draw_y - (bitmap.getHeight() / 2), null);
This is a typical operation to draw a background or a sprite. You can also use Canvas.drawText(), Canvas.drawRectangle(), Canvas.drawColor(). Lots of things.
I'm working on a game that uses Canvas as the main drawing surface, check out onDraw() in my MainGamePanel class and draw(Canvas) in my GameItem class for some examples of drawing various bitmaps/shapes/colors to a Canvas. Just remember every time you draw, you will overwrite what's below it, so the order of operations definitely matters.
Try this:
Use a SurfaceView.
Create a Bitmap from the texture (.jpeg file) with the values you found eg. screen size.
Draw that Bitmap to the canvas.
I hope this helps.
I am trying to make an app using canvas and a surfaceview, and I am worrying that in the future I would have many problems with it because I am not sure if the canvas is proportional with every device. currently I can only use my emulator since my phone's usb cable doesn't work(I know.. I have to get a new one..).
anyways, i would like to know if the canvas would transfer my coordinates and make everything proportional, what I mean by that is that if i have something in point a, lets say (10, 10) on a device that the screen of it is 100 X 100 (this is just an example for easy calculation) it would be on point (1, 1) on a 10 X 10 device.
This is really bothering me...
Thanks!
No, this wouldn't be the case. If you have a coordinate (10,10), it would be the same on all devices. I'd suggest you scale your drawings.
To scale your drawings you simply define a bitmap (that will stay the same) you'd like to draw to (when screen sizes change, that bitmap will be stretched).
Define a constant bitmap:
Bitmap gameScreen = Bitmap.createBitmap(getGameScreenWidth(),
getGameScreenHeight(), Config.RGB_565);
Get the scale for both x and y
width = game.getWindowManager().getDefaultDisplay().getWidth();
height = game.getWindowManager().getDefaultDisplay().getHeight();
scaleXFromVirtualToReal = (float) width/this.gameScreenWidth;
scaleYFromVirtualToreal = (float) height/this.gameScreenHeight;
Define a canvas object based on the bitmap you defined earlier on (allowing you to draw to it eg. canvas.drawRect() [...]):
Canvas canvasGameScreen = new Canvas(gameScreen);
In your rendering Thread you'll have to have a Canvas called frameBuffer, which will render the virtual framebuffer:
frameBuffer.drawBitmap(this.gameScreen, null, new Rect(0, 0, width,
height), null);
No, the unit on the screen (whether you are using canvas or OpenGL) is a pixel. You can get the size of your canvas using Canvas.getWidth() and Canvas.getHeight() if you need relative coordinates, but your Canvas drawing methods are also in Pixels, so I guess you will need to convert coordinates in OpenGL only and not while using Canvas.
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.