I have a RelativeLayout that I want to contain 4 concentric circles (a radar effect, if you will). I'd like to be able to hide and display the RelativeLayout, so I'm wondering how exactly to use Canvas and Paint to draw a circle to the RelativeLayout. If someone could explain the lifecycle of how it works, that would be very helpful. Right now I've got:
setContentView(R.layout.applayout);
myRelLayout = (RelativeLayout) findViewById(R.id.RLRadar);
Canvas canvas = new Canvas();
Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(0xFF000000);
circlePaint.setStyle(Style.STROKE);
canvas.drawCircle((float) centerX, (float) centerY, (float) (maxRadius / 4), circlePaint);
Am I on the right track? Do I need to convert the canvas to some sort of ImageView and add that to the RelativeLayout? Or am I completely off base here?
Thanks for any help!
Edit: Here's the working code.
// Add the radar to the RadarRL
Picture picture = new Picture();
Canvas canvas = picture.beginRecording(screenWidth, screenHeight);
// Draw on the canvas
Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(0xFF000000);
circlePaint.setStyle(Style.STROKE);
circlePaint.setStrokeWidth((float) 5.0);
canvas.drawCircle((float) centerX, (float) centerY, (float) (maxRadius / 4), circlePaint);
canvas.drawCircle((float) centerX, (float) centerY, (float) ((3 * maxRadius) / 4), circlePaint);
canvas.drawCircle((float) centerX, (float) centerY, (float) (maxRadius / 2), circlePaint);
canvas.drawCircle((float) centerX, (float) centerY, (float) (maxRadius), circlePaint);
picture.endRecording();
If you don't want to create a custom view, you can use setBackgroundDrawable. For example, using a Picture and a PictureDrawable:
// Create the picture.
Picture picture = new Picture();
Canvas canvas = beginRecording(WIDTH, HEIGHT);
// Draw on the canvas.
picture.endRecording();
// Now set it as the background drawable.
PictureDrawable drawable = new PictureDrawable(picture);
relativeLayout = (RelativeLayout) findViewById(R.id.RLRadar);
relativeLayout.setBackgroundDrawable(drawable);
You have to create a Custom View and override the View.draw(Canvas) method. You can then use the canvas parameter to draw the radar effect. The view can then be placed in any layout.
Related
The feature of a bitmap image is that it has a transparent background and usually has a rectangular shape, so when we try to add a border to the image, instead of its content inside there will be a border, its background will have a border. For example, I have a bitmap image of a dog and I want it to have a border but instead, a rectangular background will have a border. I'm using Canvas to draw a bitmap and am having this problem. Can anyone help me?
Block code to create photo
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10); // set stroke width
mPaint.setColor(getResources().getColor(R.color.black)); // set stroke color
mPaint.setAntiAlias(true);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icons8_bus_36_2);
tempBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas tempCanvas = new Canvas(tempBitmap);
Rect rect = new Rect(
10 / 2,
10 / 2,
tempCanvas.getWidth() - 10 / 2,
tempCanvas.getHeight() - 10 / 2);
tempCanvas.drawRect(rect,mPaint);
tempCanvas.drawBitmap(bitmap, 0, 0, mPaint);
On this part:
Rect rect = new Rect(
10 / 2,
10 / 2,
tempCanvas.getWidth() - 10 / 2,
tempCanvas.getHeight() - 10 / 2);
change to
Rect rect = new Rect(
10 / 2,
10 / 2,
(tempCanvas.getWidth() - 10) / 2,
(tempCanvas.getHeight() - 10) / 2);
Thats because 10 is divided by two first
Also, draw bitmap first before you draw rect
OR
you could draw with this:
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
I want to create a shape like this on a canvas. I know how to draw a circle with a stroke but I want a crescent moon kind of an effect on the circle.
Here is the code of the circle:
Bitmap bitmap = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
float mid1;
float min1,fat1,half1,rad1;
mid1 = ImageWidth / 2;
min1 = Math.min(ImageWidth, ImageHeight);
fat1 = min1 / 17;
half1 = min1 / 2;
rad1 = half1 - fat1;
mid1 = mid1 - half1;
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
canvas.drawCircle(mid1 + half1, half1, rad1, paint);
The code is working perfectly for the circle. I know how to draw a stroke too but I cant create a crescent moon effect.
Set a circular clip path and then draw a second circle displaced by some quantity in both x and y.
You can refer to this view，Use Bezier curve to draw, use PorterDuff.Mode.DST_OUT to get the correct partial view (moon view).
I am working on creating a custom view where a user can select an angle. Below is an example of what the end result should look like:
I am achieving this with the following code:
mPaint.setColor(Color.BLACK);
canvas.drawCircle((int) (mSize.right / 2), (int) (mSize.bottom / 2),
mWidthOutside, mPaint);
mPaint.setColor(Color.LTGRAY);
canvas.drawCircle((int) (mSize.right / 2), (int) (mSize.bottom / 2),
mWidthInside, mPaint);
The problem with doing it this way, is the background is a static LTGRAY, which I hope to make Transparent.
How would I go about leaving the center of the circle transparent?
I have tried the following hoping the the drawArc function would only create a line the width of the paint, and not fill the center. It does in face fill the center.
RectF rectF = new RectF(centerX - mRadius, centerY - mRadius, centerX
+ mRadius, centerY + mRadius);
canvas.drawArc(rectF, 0, 360, false, mPaint);
Suggestions on how to keep the center of the circle transparent?
As asked :)
The solution is to set the style to be Paint.Style.STROKE
Hollow Circle in canvas.
Bitmap bitmap=Bitmap.createBitmap(500,500, Bitmap.Config.ARGB_8888);
Canvas canvas=new Canvas(bitmap);
//canvas.clipPath(,Region.Op.DIFFERENCE);
Paint paint=new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(140);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(250,250,150,paint);
imageView.setImageBitmap(bitmap);
I have an ImageView which i use to draw map tiles. For zooming i use:
matrix.postScale(scale, scale, screenWidth / 2, screenHeight / 2);
imageView.setImageMatrix(matrix);
and i draw location marker as a circle on it of 30 pixel radius like below:
drawGPSMarker(canvas, locX, locY, 30); //canvas: imageView's canvas
which is:
public void drawGPSMarker(Canvas canvas, float scrnX, float scrnY, float radius) {
Bitmap bitmap = Bitmap.createBitmap(450, 450, Bitmap.Config.ARGB_8888);
Canvas cnv = new Canvas(bitmap);
Paint paint = new Paint();
....
cnv.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, radius, paint );
paint.setColor(Color.WHITE);
canvas.drawBitmap(bitmap, scrnX - bitmap.getWidth() / 2, scrnY - bitmap.getHeight() / 2, paint);
bitmap.recycle();
}
the matter is when i zoom in, imageView is zoomed in and marker bitmap also gets bigger even if its redrawn. Any idea how i can restrict the drawGPSMarker(..) to not grow, I mean it should show same size and thickness regardless of imageView's zoom.
For explaination please see the attached imgage.
Thoughts please?
How do you cut (remove) a section from a bitmap???
I want that section/shape to be removed.. leave transparent in place of section..
Say shape is cercle or square..
You should be able do this with a Porter-Duff color filter and a Canvas:
public void punchHole(Bitmap bitmap, float cx, float cy, float radius) {
Canvas c = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColorFilter(new PorderDuffColorFilter(0, PorderDuff.Mode.CLEAR));
c.drawCircle(cx, cy, radius, paint);
}
Well, that was wrong. However, using a Porter-Duff transfer mode does work:
public void punchHole(Bitmap bitmap, float cx, float cy, float radius) {
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawCircle(cx, cy, radius, paint);
}
(The bitmap passed as an arg needs to be modifiable, of course.)
Use Bitmap.setPixel(x,y,Color) function to set the desired pixels to transparent
for example:
Bitmap bmp = ...;
bmp.setPixel (100,100,Color.TRANSPARENT);
for the pixel at x/y offset 100,100. Though you'll find this potentially slow to do this on many pixels...
Did you try drawing a circle with a transparent color,
ARGB = 0,0,0,0 ?