I am trying to draw a white circle with the following code:
mPaint.setColor(0xFFFFFFFF);
canvas.drawCircle(x, y, radius, mPaint);
But it is being displayed as a solid disk. How do I get it to just display as a circular outline with a transparent centre?
I've had a look in the help and it makes no sense to me, probably because I'm not used to the drawing terms like stroke and dither. What's wrong with background and border, eh?
I suspect you want:
mPaint.setStyle(Paint.Style.STROKE);
so that it doesn't do the filling. But then again, I've never used the Android API - this is really just a guess based on the docs :)
Related
I want a circle on the canvas in android app.
It can be done either using a bitmap of circle or actually drawing a circle.
I have done both but the circle in later has rough edges.
Why is this happening. And how can i get the Circle as i expect ?
edit:
Since android is running on phones varying in pixel density and screen size, is there a recommended method ? I want the circle to be smooth all the time.
Try
paint.setAntiAlias(true)
or set a flag during creation
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
And tell us if it works
Good Morning,
I have an ImageView that I initialized with #99aaaaaa color (it corresponds to 153,170, 170,170). after that I draw some lines with different colors. and Now I want to Fill my Canvas with the original color (#99aaaaaa).
The method myCanvas.drawColor(OriginalColor) fills the canvas with OriginalColor, but the lines still visible
myPaint.setColor(OriginalColor);
myPaint.setStyle(Paint.Style.FILL);
myCanvas.drawRect(0, 0, 170, 170, myPaint); // my ImageView is 170X170
Also let lines visible.
Any help please, Thank You
as the canvas original color is semi transparent, then you draw something on it and draw another layer of semi transparent stuff, then its pretty obvious youll see the level-down-layer through the top transparent layer isnt it? another words, if you place a half transparent glass on your knees, ull still see the knees through it
Set the transfer mode as follows, before calling drawRec():
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
Reset the painter afterwards, for further drawing:
paint.setXfermode(null);
paint.setColor(0xFFFFFFFF);
Is it possible to realize the following picture in Android with canvas?
I want to have a hole and not only a Circle over the red layer which is yellow colored. I tried this (and failed) with the following Code in my onDraw()-Method:
canvas.drawBitmap(yellow, 0, 0, paint);
canvas.drawBitmap(red, 0, 200, paint);
Paint p = new Paint();
p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawCircle(300, 300, radius, p);
But when I use this code, it makes a hole through both bitmap's. At the end, this App should be a Maze with a ball, holes and other stuff. When the ball would fall into a hole it should appear under the red-Bitmap. Is it possible to realize this?
Answer:
If someone should have the same problem: use View and not SurfaceView. That was my fault, because the bg of a SurfaceView could not be set transparent.
I think you're misunderstanding how the canvas/bitmaps work. There aren't layers or objects stored (unless you store them). It's just a pixel by pixel representation of the image displayed. A yellow circle over a red square is what you have shown in the above picture.
If you truly want a red layer, you have to composite two bitmaps. Draw the hole over the red square in one bitmap, draw the yellow layer in one bitmap. On the canvas, draw the yellow bitmap, then the "red square with a hole" bitmap on top.
I've been working on this for a while. This code:
Log.i(TAG, "stroke style: " + paint.getStyle());
Log.i(TAG, "stroke cap: " + paint.getStrokeCap());
canvas.drawPoint(p.x, p.y, paint);
prints 'STROKE' and 'ROUND' to the logs, but draws a black SQUARE to the map! Anyone know what I need to be doing differently to produce a dot instead of a square!?
Thanks!
EDIT
I'm going to give the below suggestion(s) of using drawCircle a shot, but I was just confused I guess because everything I've read indicates you should be able to indicate you want a circle that way. One example being this google book entry
Try to use drawCircle instead
circlePaint.setStyle(Style.FILL);
circlePaint.setAntiAlias(true);
circlePaint.setColor(0xFFFF0000); //opaque red
float radius = 10f; //10 pixels
canvas.drawCircle(p.x, p,y, radius, circlePaint);
you can try drawCircle() with p.x and p.y as center (first and second argument) and use 1 or 2 as radius depend on how big you want the dot to be and use the paint with stroke style FILL..
It draws correctly if you draw to a canvas backed by a bitmap. It doesn't seem to draw correctly if you draw directly to the screen (i.e. a canvas passed to a View's onDraw() method). Another way of getting around the problem is, therefore, to first render to a bitmap and then draw that to the screen.
I am drawing an arc with a border by painting two arcs, one over the other the first being slightly larger.
The issue is with "slightly larger" this can end up with the border not always being even all the way round.
Both the arcs I am drawing have the same radius, I simply make it larger by adding a degree to the start and two degrees to the end (necessary to ensure the borders on either end of the arc are equal) and increasing the stroke width.
In the supplied picture the thicker border edge is the smallest I can possibly make it while it is still visible. (-1 degree off the inner arc)
I have considered drawing the arc outline with four separate calls two straight lines for either end and two arcs. This seems quite inefficient for what I want to achieve.
I am wondering if anyone has any suggestions about how else I could draw a border thats even, minimizing the number of draw/canvas rotation calls if possible.
Relevant code sample for current solution:
Paint mOutlinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint mFillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mFillPaint.setStyle(Style.STROKE);
mFillPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
mFillPaint.setColor(Color.TRANSPARENT);
mFillPaint.setStrokeWidth(mValueWidth);
mOutlinePaint.setStyle(Style.STROKE);
mOutlinePaint.setStrokeWidth(mBorderWidth);
mOutlinePaint.setColor(Color.WHITE);
mRect.set(mHalfXSubRadius, mHalfYSubRadius, mHalfXAddRadius, mHalfYAddRadius);
canvas.drawArc(mRect, ARC_START-1, MAX_ARC+2, false, mOutlinePaint);
canvas.drawArc(mRect, ARC_START, MAX_ARC, false, mFillPaint);
U shouldnt make your arc bigger, instead try to draw the same sized arc (in white), X pixel right,down,up,left,corners as well (total of 8 drawings).
where X is the border size u want.
after that draw the main arc (in gray) in the middle.
psuedo code:
paint=white;
drawArc(x,y+2);
drawArc(x,y-2);
drawArc(x+2,y+2);
drawArc(x+2,y-2);
drawArc(x-2,y+2);
drawArc(x-2,y+2);
drawArc(x+2,y);
drawArc(x-2,y);
paint=gray;
drawArc(x,y);