Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Paint.ANTI_ALIAS_FLAG does not seem to work when drawing at same place on Canvas?

There is an issue with anti-alias when trying to draw multiple times at same place using the android Canvas.

First I'm initializing paint = new Paint(Paint.ANTI_ALIAS_FLAG) and then setting stroke cap to Paint.Cap.ROUND.

Then, if I call canvas.drawPoint(x, y, paint) once causes the following result:

enter image description here

While calling canvas.drawPoint(x, y, paint) multiple times (100 in this example) causes this:

enter image description here

I've created an example with minimal code to run this on GitHub: android-canvas-antialias

I noticed if I draw the points with a certain distance, the anti-alias seems to work as expected (first image). But drawing it with little offset causes the same anti-alias issue (second image).

Is there any setup that need to be done for this to work while drawing the points at same place? Or I simply may not be drawing at same place (or with very little offset)?

EDIT: the real issue is because I'm trying to draw a width variable line segment. See the MainActivity.drawSegment on git repository.

like image 354
tato.rodrigo Avatar asked Aug 11 '15 13:08

tato.rodrigo


People also ask

What is paint Anti_alias_flag?

ANTI_ALIAS_FLAG. Paint flag that enables antialiasing when drawing.

How do you make a bitmap on canvas?

Use the Canvas method public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint) . Set dst to the size of the rectangle you want the entire image to be scaled into. EDIT: Here's a possible implementation for drawing the bitmaps in squares across on the canvas.

What is anti aliasing Android?

To keep the story simple, anti-aliasing works by blending the foreground and background colors to create a smoother edge. In our example, since the background color is transparent and the foreground color is red, anti aliasing essentially makes the pixels on the edge go from solid to transparent gradually.


2 Answers

I don't think this is a problem, I mean, a bug itself. And even if solvable trivially I guess.

The pixels of the edge of the circle are draw with some alpha, e.g. a red pixel with 25% alpha if you overlay it with more 3 pixels with same alpha you will get a 100% red pixel.

A workaround would be manage all shapes created and check if some of them has the same size + position (maybe color too) and just draw one of them.

The link below explain how the Antialiasing works, might help.

http://web.cs.wpi.edu/~matt/courses/cs563/talks/antialiasing/methods.html

like image 60
Idemax Avatar answered Sep 17 '22 08:09

Idemax


It works correctly. Anti-aliasing is when the edges of the shape are semi-transparent. When you multiply the shapes, the semi-transparent pixels become not transparent and you get "ragged" edges.

The solution is not to do this.

like image 40
kandi Avatar answered Sep 21 '22 08:09

kandi