I use anti aliasing to make my images more smooth. When using anti aliasing a dark border will be drawn around the images. This happens because Android uses the color black and mixes it with the yellow from the images.
This is a gernal problem! When I draw a rectangle and set the alpha value to 127 the image also gets quiet dark. Instead of using black Android should use white to draw the transparency.
Is there any workaround how I can handles this problem?
Example sourcecode for drawing a semi transparent rectangle to a canvas. The rectangle is dark as well but it should be bright.
Bitmap bmp = Bitmap.createBitmap(200, 200, Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
Paint rPaint = new Paint();
rPaint.setColor(Color.parseColor("#F7E836"));
rPaint.setAlpha(127);
rPaint.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, 100, 100, rPaint);
The images are SVG graphics which are rendered with the following library:
http://code.google.com/p/svg-android/
I think I found the bug. The problem is the SurfaceView. Its background is black. The same semi-transparent bug occurs when I use the code above and display it on an ImageView and the background color of the UI element behind the ImageView is black.
The background color of the SurfaceView is always black. If I change this to white with setBackgroundColor, the SurfaceView gets white, but the white background will be drawn OVER all my other images drawn with OpenGL. I think these must be switched. First the background color should be drawn and than the OpenGL stuff.
Post links to the original source images and show how your anti-aliasing them (code).
When an image is anti-aliased the algorithm will insert colors between the colors which make up the edges. So with your yellow star image, if the background was white, it will attempt to add pixels around the edge which are between the yellow and white (a lighter shade of yellow). This is what 'smooths' the image.
But, if the image has an indexed color space, those lighter shades of yellow probably don't exist in the images pallet and as a result, you can get almost any other color in its place, whatever color in the index lands on the index value calculated.
The image in your question is an indexed png and hence has this problem.
If this is the issue, then you need to convert your original source images to an non-indexed color space, or anti-alias them prior to indexing the images which doesn't work well if the images need to be scaled by your application or if you need to anti-alias against various different backgrounds.
The other thing that could be happening is that your anti-aliasing against a different background than you think you are, specifically the yellow star is anti-aliased correctly if the background were black, posting your code is the easiest way to figure this out.
Related
I've small (20x20) circles in my libGDX stage. I have created the texture with GIMP, and for hdpi devices it is (30x30). When I use it in my game, it looks like this, as expected.
But when I tried linear filtering with following code
textureRegion.getTexture().setFilter(Texture.TextureFilter.Linear,Texture.TextureFilter.Linear);
,The circle has for some reason gray edges:
I checked the image in GIMP and it does not have any anti-aliased pixels. The original texture looks same as the first image. Why does it occur and how could I have a smooth circle?
If minification is used then border might have to be little bigger. And to avoid gray borders syndrome, transparent border should not be color(0,0,0,0) but color of the edge with alpha channel of 0. So white edge picture would use 255,255,255,0 as border color.
EDIT
How I add border with transparent layer using GIMP :
Create Canvas with any size(Image Size in GIMP) that you want (File -> New)
Draw your Image with transparent outer border/space on a layer.
Create new Layer below your Image Layer without space/border with Colour(255,255,255,0) so that this layer become invisible.
Export your Image.
I have an image in my assets folder on which I am drawing stuff using an external program and then using them in my app. The problem is that the bitmaps are blank (transparent) with black and white objects in them. Note that the objects are created with Anti-Aliasing on to look better. I know this was asked before but I couldn't find what I want. I need to replace all the black and white pixels in the image (even the transparent anti-aliased ones!) to the colors given by the user. Below are some images to show what I want to do:
Please note that this is just an example and I have even some very complicated shapes and the final colors aren't known (as inputed by the user in RGB style).
Any help is appreciated. Thanks! :)
Usually you can tint the images you load apliying them a color at runtime.
The problem is that color applies to the whole image and it only matchs exactly the same color in white pixels, with or without alpha.
So you could separate all the areas of the image with the same color, save them as white and then tint them at runtime while overlapping one over another.
It depends on the framework you are using.
I am doing Some image processing on image using OpenCV, i want to get an image that will always have black background and white foreground(text) on it,the problem is that i can invert the the image having white bg and black fg using BINARY_INV, but when user gives black bg and white fg how can i identify that image has already black bg not white so i wont have to invert it.i hope i made myself clear.
here is a sample.
Sample Image
New Image
I have solved this problem myself.if Findcontours are applied on white bg,it always detects the border of image as a contour,so i implemented a logic that if the biggest contour has size equal to the size of the image,then invert the image.its not a best solution but works wonderfully for my specific problem.
to draw the inner contours you can find contours with hierarchy, and then draw only the child contours, meaning the one containing the digits and alphabets, and not draw the outside parent contour
See below image and it contains some black outline and i want get only those outline. means all other part of image should be invisible.
how can i achieve this?
I'm thinking is it possible to identify a colour and invisible other colours?
You can make all other colors transparent using PorterDuffXfermode
It looks as if in your case this may not be enough, as you have black regions in the photo. One option is to change the color of the black regions to a very dark gray before adding the lines.
I have a detailed background that has a hole in it (transparent area in the middle). The background is detailed png image.
Now I want this hole to be shown on all devices equally. So I thought of 9patch, but then the details get screwed of the image. If I don't use 9patch, the hole appears as an egg, which is not the point.
What is the way to fix this?
update
I used 2 different methods (depending on what is better in the excact case)
-different resources for different screens.
-Disadvantage: will increase you app size significantly
-Advantage: This is quit convenient for you to use
-Extend Drawable and give your Background and a alpha map (Alphamap in your case would be a ninepatch with 0xffffffff ouside and 0x00ffffff as color for your circle) over with the constructor.
Override draw(). Create
ComposeShader(
drawable1,
drawable2,
PorterDuff.Mode.MULTIPLY);
Set the shader to a paint and draw it on the canvas.
-Disadvantage: Not so convenient
-keeps you app size small :)