I have a simple bitmap that I draw within a canvas & that I rotate using a matrix.
The problem I bump into is that using hardware acceleration the edges are not anti-aliased when rotated (this is working perfectly with Hardware acceleration turning off).
And of course things like “setDrawFilter” are useless as they are ignored when hardware acceleration is turned on!
canvas.setDrawFilter(new PaintFlagsDrawFilter(1, Paint.ANTI_ALIAS_FLAG));
Am I missing something or is it just a limitation of the hardware rendering method ? Is there any alternative?
Setting the antialias flag on the paint would not help anyway. To get antialiased borders on bitmap when rotating them you should add a 1px transparent border around them.
Adding this 1px transparent border is not as easy as I thought. Adding it at runtime is really messy. My app loads a lot of bitmap and to add this border I need to allocate even more bitmap to redraw them. This really bust the heap but as I took good care with avoiding any memory leak, it´s working as intended. What’s really killing me is the “lags” that this has introduced. I tracked down this fluidity lost to the GC. This last one seems to be slowing down the UI Thread when he claim back the recycled bitmaps.
Using a cache is not the solution either. This is the best way towards performance but storing 500x500 PNGs (alpha obliged) is way out of proportion.
So, here I am, hitting the wall. I haven’t yet tried a “draw time” way but my guess is that drawing to an off-screen bitmap buffer that I don’t think will be HW acc. (correct me if I’m wrong) won’t help my cause.
The Idea of having an “AA shader” is really seducing and I see here several advantage. It’s well supported by the hardware acceleration, will of course be a marvel for the memory (no more savage bitmap allocation) and could be totally independent from the bitmap scaling.
I made a quick test and this is by far the best AA (and here I mean in quality) I ever manage to get and … it’s fast… This quick wrap-up do an upper edge AA using shaders.
BitmapShader bitmapShader = new BitmapShader(mBitmap,
TileMode.CLAMP, TileMode.CLAMP);
Matrix m = new Matrix();
m.postTranslate(0, 1);
bitmapShader.setLocalMatrix(m);
final LinearGradient AAshader = new LinearGradient(0, 0, 0, 1, 0x00000000, 0xffffffff, TileMode.CLAMP);
ComposeShader compositor = new ComposeShader(bitmapShader,
AAshader, PorterDuff.Mode.DST_IN);
mPaint.setShader(compositor);
canvas.drawRect(this.getBounds(), mPaint);
Now the big drawback ! How to get a 4 edge AA :) ??? We can probably manage an upper/lower edge AA using a multi steps Gradient but this is still dirty. A nice way will be to combine the source bitmap with some kind of 9-patch to get the transparent border, but we cannot compose 2 bitmapShader… So, here I am once again. How to get this mask Shader! Damn wall ;)
Fix that worked in my case:
private void fixAntiAlias(View viewFromThe80s) {
if (Build.VERSION.SDK_INT > 10) {
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG);
viewFromThe80s.setLayerType(View.LAYER_TYPE_SOFTWARE, p);
((View) viewFromThe80s.getParent()).setLayerType(View.LAYER_TYPE_SOFTWARE, p);
}
}
Details:
My textview used a 9-patch as a background so I couldn't add a transparent 1px border without impacting the 9-patch pixels. So, instead, I was able to get this working by disabling hardware acceleration for the given view and its parent:
I'm calling this right after view inflation. Specifically in onCreateViewHolder in my case (in the viewholder constructor to be exact). This fixes my rotated TextView which uses a NinePatchDrawable background, similar to the following:
<TextView
android:id="#+id/text_new_feature"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:rotation="-30"
android:background="#drawable/background_new_feature"/>
Related
I have a problem that I can not really solve. I have created a graphing app which will contain data with alot of data points. To enable scrolling in the graph i create a bitmap of the graph data, and the shift / move the bitmap to the right or left of the screen depending on the user input. The bitmap is always the graph view height and graph view width. When the user moves the bitmap, i shift the bitmap with:
memoryCanvas.drawBitmap(memoryBitmap, bitmapShift, 0.0f, paint);
where shift is a a float value containing the shifting values.
Now, on most devices i have tried this is, it works very nice. I have tried it on HTC Desire, Galaxy Tab and Galaxy S. When testing this on my own Galaxy S however, i get strange results that i can not explain. Do note that my Galaxy S contains a custom rom (with android 4.0.4), so that is probably the reason why i get this behavior, but i still can not understand it or properly mitigate it.
So in a normal use case behavior, the bitmaps get shifted by bitmapShift number of pixels, and then i fill in the empty space by normal line drawing. But when using my phone, dragging the bitmap either direction slowly, so the bitmapShift values are around 0.5, the bitmap does not move, or only moves sometimes. I have compared the bitmapShift on the other platforms and they are in the same range, 0.5 when dragging slowly. This behavior does of course screw up my drawings a lot. This does also happen when doing fast dragging, but its most visible when doing it slowly.
I can not really figure out what causes this behavior. The bitmap does not move according to my bitmapShift value. It does on all other platforms i have tried. If i skip using bitmaps, and only draw lines according to the shifting values, everything works fine.
Does anyone have any idea on what could cause this behavior? Im kinda running out after sitting some days trying to figure it out. The critical code is below. This code is in my onDraw function.
memoryCanvas.setBitmap(emptyBitmap); //First set another bitmap to clear
memoryCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); //Clear it
memoryCanvas.drawBitmap(memoryBitmap, bitmapShift, 0.0f, paint); //Draw shifted bitmap on it
memoryCanvas.drawLines(lineDrawPoints, 0 , cnt, paint); //Draw remaining lines
memoryCanvas.setBitmap(memoryBitmap); //Set the original
memoryCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); //Clear original
memoryCanvas.drawBitmap(emptyBitmap, 0.0f, 0.0f, paint); //Draw the final image
canvas.drawBitmap(memoryBitmap, 0, 0.0f, paint); //And finally draw on real canvas
Any help, tips, suggestions are very welcome.
Cheers
Wilhelm
When there is only a simple transform set on Canvas (a simple transform = translate only, no rotate, no scale), Skia, Android's 2D rendering library, aligns bitmaps to the pixel grid. This means that a move by less than 1 pixel might not be visible at all. A silly workaround is to set a very, very small scale or rotate transform on Canvas before drawing your bitmap. This has the side effect of not snapping bitmaps to the pixel grid.
I think I should just add a new API on Paint to let apps do subpixel positioning of bitmaps no matter what transform is set.
I am trying to animate several shapes(paths) by drawing them on the surface holders canvas.
At first I was drawing them as paths and everything was fine, the movement was smooth.
As I increased the number of objects(shapes) the performance decreased and I made some
tests to see if instead of drawing shapes drawing bitmaps is faster. And.. drawing
bitmaps seems to be considerable faster (less computation maybe) BUT the movement is
not smooth. It looks like the bitmaps always move from pixel to pixel instead of using anti alias to, I dont know, draw states as half pixel.
The signature of the method looks like :
canvas.drawBitmap(cloudBitmap, float left, float top, Paint p);
which suggests that I should be able to draw a bitmap at 0.5f pixels.
Any idea why ?
I think it might be due to the bitmap being drawn without filtering it for smoothness. Have you set the paint to smooth the bitmap? If not, that might be your solution.
Paint paint = new Paint();
paint.setFilterBitmap(true);
If I were to initialize a Paint, and set it's text size like so:
Paint = new Paint();
Paint.setAntiAlias(true);
Paint.setARGB(255, 255, 0, 0);
Paint.setTextSize(screenWidth/100);
//screenWidth is the width of the screen in pixels given via display metrics.
And then draw text to the canvas like so:
String text = "Hello"
canvas.drawText(text, (screenWidth/13), (screenHeight/5), Paint);
Would the text Show up in the same relative spot the same relative size regardless of screen metrics? I ask because I only have 1 device and the Emulator doesn't run very well on my multi-core machine.
What I've been doing up until this point is simply using a bitmap with the text written over a background, but my memory usage is getting quite heavy, so I'm looking to cut down on the number of bitmaps loaded.
My other option is to save the text as a bitmap with a transparent background and overlay it on a single bitmap background. But that seems to be only half as productive, as it is actually creating 1 more bitmap, just reducing the total size of all the bitmaps stored. I also don't like this idea because i'd eventually like to take more control over the object life cycle and this will make that less effective.
Also, is there any method of adding styles to text (such as complicated fonts and color patterns besides using pre-made Drawables) so that the text can be drawn to canvas? (As cheaply as possible)
NVM, Solved By Poking around all day I figured out that DP units can be called from the res folder and will give a fairly uniform position of the text. and that paint is not as customization friendly as I wish.
I find that DrawBitMap is taking 50-60 ms for drawing just three bitmaps one is a rectangle occupying the full screen, one is a circle and another one is a Path. My bitmaps are created by using Canvas.drawPath, drawRect and drawCircle on a blank bitmap with the Bitmap.Config as ARGB_8888.
I am using ARGB_8888 to make the background visible to get a layering effect.
I was shocked to find the time taken as around 50ms as I thought drawBitmap would be a very simple operation. Can someone guide as to is there any fundamental mistake that I am making. Following is my code
Creating the Blank Bitmaps
Rectangle = Bitmap.createBitmap(320,480,Bitmap.Config.ARGB_8888);
Circle = Bitmap.createBitmap(70,70,Bitmap.Config.ARGB_8888);
Leaf1 = Bitmap.createBitmap(20,30,Bitmap.Config.ARGB_8888);
Drawing the Shapes on the appropriate BitMap
Canvas c = new Canvas(Rectangle);
Paint p = new Paint();
p.setAntiAlias(true);
p.setColor(0xff6e8b3e);
c.drawRect(0,0,320,480,p);
Canvas c = new Canvas(Circle);
Paint p = new Paint();
CirclePath = new Path();
p.setAntiAlias(true);
p.setColor(0xffcd661d);
System.out.println("x = "+x+" y = "+y);
CirclePath.addCircle(50,50,10,Path.Direction.CW);
c.drawPath(CirclePath,p);
Canvas c = new Canvas(Leaf1);
Paint paint = new Paint();
Path path = new Path();
paint.setAntiAlias(true);
path.moveTo((float)184.37,(float)219.15);
path.cubicTo((float)188.32,(float)219.15,(float)192.88,(float)220.44,(float)195.62,(float)223.54);
path.cubicTo((float)197.84,(float)226.05,(float)203.2,(float)229.84,(float)198.18,(float)245.98);
Drawing the BitMap in OnDraw
canvas.drawBitmap(Rectangle,0,0,p);
canvas.translate(x,y); // For animation effect
canvas.drawBitmap(Circle,0,0,p);
canvas.drawBitmap(Leaf1,0,0,p);
Now when I record the time taken for this three drawBitMap I find it is taking around 50ms
Is there something big time mistake in the code. Changing the Bitmap.Config to RGB_565 brings the time down to around 8ms but then the background is not visible and I am getting a black box around the path
Looks normal.
Canvas is very slow on transparency.
You can either try to switch to OpenGL ES or design your content with as little transparency as possible so you can use RGB_565 as often as possible.
You should always match the format of your screen. There was a very similar question recently, and Romain mentioned that blits essentially turn into memcpys if the format matches. And, of course, make sure that you're not using an esoteric blit mode.
Also, why are you using anti-aliasing if you're not scaling/rotating anything?
As for 565 not working - I'm just skimming over your code. Are you using the alpha channel? What exactly do your bitmaps look like?
One of the Android devs explains this here. To draw ARGB_8888 quickly you need to draw to a 32-bit window. See bottom of article for benchmarks.
I want to draw a bitmap on a canvas with bigger size than it is. I can use canvas.drawBitmap(bitmap, null, destRect, null); but that gives a poor quality, as the result is pixelated, if the source image is sightly smaller than the destination rectangle.
How can i draw my bitmap using bilinear or bicubic resampling?
Any help would be appreciated, thanx.
You need to set the FILTER_BITMAP_FLAG flag in your paint.
canvas.drawBitmap(bitmap, matrix, null); //ugly jaggies unless scale is 1:1, but fast
or
Paint paint = new Paint();
paint.setFilterBitmap();
canvas.drawBitmap(bitmap, matrix, paint); // pretty but slower (not too slow, usually)
The same applies to other (syntactic sugar) forms of the drawBitmap method.
There is no documentation anywhere for most of the Android drawing options and neither is there documentation for the underlying native Skia library that does the rendering. I'd be happier if there were. You can search the Skia source code on Google Code Search. Search for Skia and dig into the raw source; that's the only documentation.
FILTER_BITMAP_FLAG doesn't work for downscaling in most of the cases.
Good downscaling algorithm (not nearest neighbor like) consists of just 2 steps (plus calculation of the exact Rect for input/output images crop):
downscale using BitmapFactory.Options::inSampleSize->BitmapFactory.decodeResource() as close as possible to the resolution that you need but not less than it
get to the exact resolution by downscaling a little bit using Canvas::drawBitmap()
Here is detailed explanation how SonyMobile resolved this task: https://web.archive.org/web/20140228024414/http://developer.sonymobile.com/2011/06/27/how-to-scale-images-for-your-android-application/
Here is the source code of SonyMobile scale utils: https://web.archive.org/web/20140227233706/http://developer.sonymobile.com/downloads/code-example-module/image-scaling-code-example-for-android/